Jump to content
Search Community

Use same SVG filter for multiple images animation

Stefano Monteiro test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Context: I am using an svg filter to animate images on scroll. It was tricky because the animation is done on the filter not image, so all images with the filter would animate at the same time. Instead of having an svg for each image, I wanted to use the same and avoid duplicate code. 

 

I did manage to achieve it, however I would like to know if there is a better approach in doing this. Also, as seen commented out I tried to use ScrollTrigger's onEnter and onLeave. Would like to understand why this approach wouldn't work.

 

I start the timeline with .set() to add the filter to the triggered image inside the loop and finish again with .set() to remove the filter, so it can be applied on the next image when it's triggered.

 

 

See the Pen dyNQvWN?editors=0010 by stefanomonteiro (@stefanomonteiro) on CodePen

Link to comment
Share on other sites

  • Solution

Your onEnter/onLeave probably didn't work because:

  1. You're animating the wrong thing - the parameter that gets passed to the onEnter/onLeave callbacks is the ScrollTrigger itself, but you named it "image" which overruled the variable scoped to the parent function: 
    // BAD
    onEnter: (image) => gsap.set(image, { filter: "url(#noise)" }),
      
    // GOOD
    onEnter: (self) => gsap.set(image, { filter: "url(#noise)" }),

     

  2. The "end" was set so far up that it wouldn't happen until your images are off-screen but you don't have enough room to scroll that far. 

Glad you got things working. For what it's worth, I'd recommend testing on a lot of devices because the way you're doing things strikes me as prone to running into browser graphics rendering bugs. I've seen, for example, several browsers that don't actually render the changes that you make to SVG masks or things that are reused on other elements. I'm not saying yours will break - I'm just saying it's one of those things that I'd see as a bit risky. 

 

In other words, the browser may render it correctly at first, and then GSAP correctly animates all the values but the browser ignores that in terms of rendering.

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

Awesome, Thanks for the extra tips on browser compatibility. And how to use self on the onEnter

 

It turns out though if I use onEnter and onLeave, the filter is removed before the animation ends in case the scroll triggers the next image. With the chain of .set() works best in this case.

 

Thanks for all the help!!

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...