CODEWITHSUNDEEP
javascriptjquerycssgif
Caro
Caro

Reputation: 87

how can I control a gif?

Here is the thing, I have three gifs, each one doing a part of an animation

<img src="images/carEnters.gif" id="enter">
<img src="images/carLeaves.gif" id="exit">
<img src="images/tireTracksDissappear.gif" id="delete">

these gifs are to be shown when the scrollTop reaches a certain value, which is when the div they will be shown in will be in the viewport. However, I only want the animation to happen once, meaning that I don't want it to repeat. Then, If the usar scrolls down, I want the gif where the car leaves to play (also once) and after it is done, I want the last gif to play. I have no idea if this is possible at all, to control the moment they start with the scrollTop and to pause the animation at specific time. I tried using freezeframe but it didn't work for me.

The idea is to create the effect of the car arriving when you scroll into that section, and as you leave, the car also leaves. Any idea or suggestion would be appreciated

UPDATE

I can't make it loop only once because the idea is that if the user scrolls backs up, the car should be able to enter again (or restart the animation, which I don't know if can be done with only one loop gif). The main problem would be... how to detect when the first gif ends and how to activate the second one... how to link them so it looks like a single animation

Upvotes: 1

Views: 180

Answers (1)

Whothehellisthat
Whothehellisthat

Reputation: 2152

You could make a gif that doesn't loop, but just plays once: GIMP Tutorial. Any good image package (free or otherwise) should be able to do the same. Maybe you can open the existing gifs and resave them without looping?

Upvotes: 1

Related Questions