Small image sequence (Scrolltrigger)

[diogocarvalho95]

Hello everybody,
I would like to create a sequence with 5 svg images. How can I create this with ScrollTrigger?

 

 

Thank you and merry christmas.

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[mvaneijgen]

Hi @diogocarvalho95

 

What have you tried already? Would love to see, so that we can better understand your thought process and see how we can better nudge you in the right direction. 

 

You could just load the SVG as an image and change the opacity each time to show and hide them, but the fun thing with GSAP is that you can also animate the SVG it self if you load it in the HTML and you have have giving all the shapes you want to animate a class name. Your example seems a bit complicated for that, but it is worth a shot.

 

Also the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger. 

 

Just fork the pen mentioned above. Create a timeline const tl = gsap.timeline({}); and start adding animation to the timeline with tl.from("myElement", { opacity: 0)}; post back here if you have something running (or not and post your code any way, so we can see what you are trying). 

[diogocarvalho95]

Hi @mvaneijgen 

 

Thanks for the answer. This is the code for what I'm trying to do:

 

[mvaneijgen]

@diogocarvalho95 as stated above, please provide a minimal demo (eg on Codepen.io), we can't help you with screenshots of code, because we can't edit any of it. 

 

Also just focus on the animation at first, remove (or comment out) everything ScrollTrigger and just focus on the animation. Everything will be so much easier to understand if you remove ScrollTrigger at first. 

[diogocarvalho95]

Hello @mvaneijgen 

here is my codepen: 

See the Pen NWBqNrJ by diogofcarvalho95 (@diogofcarvalho95) on CodePen

Thanks for your time.

[mvaneijgen]

Looks already good right? But as I suggested I would remove ScrollTrigger and just focus on the animation

 

I've created a timeline of your animation and add all the tweens you need to that timeline. I can now easily check my animation and tweak it to my liking. I've tweaked your layout a bit, so take a look at your CSS/html if you want to see what I've did. 

 

See the Pen LYBVZpJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

I can now toggle ScrollTrigger on and off easily and thus check how my animation would look if I hooked it up to a ScrollTrigger. You rarely need more than one ScrollTrigger, so keep that in mind when starting out. And adding the ScrollTrigger to the timeline, makes it easier to see what is connected to what. 

 

See the Pen KKBpMMa?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

As you can see there is a lot of duplicated code in my example, but personally I like to first get some working code before optimizing it. But below could be a version that is much mor concise, it is the exact same animation as above, but using a stagger to offset each .floor element, the issue what this one is that you can't easily do something specific for the first and last image in your sequence. Hope it helps and happy tweening! 

 

See the Pen KKBpMwg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen