- This topic is empty.
June 27, 2014 at 12:58 pm #173875
I’m looking for help knowing how to delay a GIF from playing until a user scrolls to that part of the website. User comes to the homepage, user scrolls down, once they are at a certain point, the GIF will then play.
Thank you.June 27, 2014 at 2:10 pm #173886shaneismeParticipant
Well since you can’t control the GIF, the only thing I can think of doing is using a script to append the code containing the GIF when you want it.
That would have the side-effect of downloading the GIF at that point so users with a slow connection wouldn’t get an optimal experience. Preloading it I think would start the animation, but it would be worth an experiment to try it out.
What is the GIF exactly? Depending on what it is, you might be able to get away with either scripting or CSS animation.June 27, 2014 at 2:32 pm #173888nixnerdParticipant
What is the GIF exactly? Depending on what it is, you might be able to get away with either scripting or CSS animation.
That’s what I was wondering. It could be that you don’t need a gif at all. Now, if it’s a gif of cat video, that’s going to be a problem.
You can use scroll magic or waypoints to control just about anything with scroll. However, a gif is another animal altogether.
One thing I would add to @shaneisme’s idea is to have a container that houses a static version of the gif, obviously the FIRST frame. Then, request the gif at that scroll position, using a mixture of JS and a plugin like waypoints. Then, with a little bit of server-side magic, it can be downloaded and inserted with a HIGHER z-index than the static version… or just in place of it. However, to respect people with slower connections, it’s probably better to do the former, so they have SOMETHING to look at.June 27, 2014 at 2:37 pm #173890
That’s a good idea. I’ll post the GIF as soon as I’ve finished animating it. Then we can talk.
Thanks to the both of you for the comments/suggestions.June 27, 2014 at 2:37 pm #173891
Still working on it now. I’ll post it up as soon as it’s done.June 28, 2014 at 12:17 pm #173967nixnerdParticipant
Word. Can’t wait to see it.April 18, 2017 at 7:30 am #253877Chris CoyierKeymaster
I found this (old) thread when searching for stuff on this. It’s only slightly related, but I thought I’d chime in with the article I wrote that’s related: https://css-tricks.com/photicular/April 18, 2017 at 10:25 am #253889