Is there a way to trigger an animated gif on scroll?

Design help General
1

Hi All,

Is there a way to trigger an animated gif on scroll? I see there is a few closed threads on the forum related to it but no answers. Any help would be appreciated.

Thanks,

Niall

1 Like
2

Hello @Niall_Mc_Dermott

I think that you can’t control the gif. The only thing you can do is to manipulate the gif wrapper and create a scroll interaction. If you are looking to stop the gif from loading, you can use lazy loading.

Piter :webflow_heart:

3

Thanks for the reply Piter. I tried creating scroll interactions using a variety of methods but none worked. I had the init state as none and scroll animation to make it block but it didn’t play. Can you please explain further how to manipulate the gif wrapper and create a scrol interaction? What is lazy loading?

Thanks,

Niall

1 Like
4

Lazy loading is helpful when you want images ect. to load only when they show up on the screen. This is helpful because reduces load time, but still I can’t find a lot of info here on the forum.

Can you share your read-only link?

Piter :webflow_heart:

1 Like
5

Another way to do it is having two images

  1. JPG first frame of the gift
  2. GIF

Put your both images inside a div and make the GIF one absolute positioned and opacity 0 percent, then add an interaction that whenever your div block containing these images the GIF image appears.

Hope this makes sense.

2 Likes
6

@Niall_Mc_Dermott - A animated gif is played as soon as loaded by a browser. You cannot control the animation on playback. If it is loaded, it plays. You can control the visibility of the element.

Lazy loading in this case would not solve your problem. Lazy loading refers to a way to control the downloading or initializing of a resource until it is needed. In the browser case that would be as it is coming into view, in the viewport.

1 Like
7

Thanks all for the replies.

How is Lazyloading done in Webflow? I found this: Lazy Load Remastered but doesn’t mean much to me as a non-coder.

Are there any other options for animations that can’t be done in Webflow?

SVG sequences are beyond my skillset. I can’t make sense of all the code involved.

If I use Adobe Animate to make an animation will it be possible to trigger it on scroll or the same issue with the gif?s

Thanks,

Niall

8

Why dont you convert it into video and then youll get many stackoverflow forms which tells about how to trigger a video on a Scroll

9

My Man, this was epic. and for sure very helpful as the other way is to export it on .jpeg frames and then json them with bodymovin :fist_left: