scrollTrigger: Creating slides then assigning an animation to each slide

[davidsanchezart]

Hi gsap team! My apologies if something like this has already been posted.

I'm creating a webpage using the Cover Layered Sections demo. I added an animation that selects the text elements and I want it to repeat and reverse each time there's a new slide. After trying a few different methods I can only get the animation to happen on the first slide. There was some minor success when I used the onEnter and onLeave callbacks but I couldn't get it to work. In that case, the text would stay in view when a new slide popped-in but then abruptly play through the animation. Thoughts?

Project page:
https://codepen.io/davidsanchezart/project/editor/XrYYKb

 

See the Pen zYoRMPv by davidsanchezart (@davidsanchezart) on CodePen

Edited February 26, 2021 by davidsanchezart
added Pen link

[GreenSock]

Hey @davidsanchezart. Welcome to the forums! Thanks for being a Club GreenSock member. 🙌

 

I read your post a few times and I'm not quite sure what you're asking or what the goal is precisely. It may be that I'm being thick-skulled. I did notice something that struck me as odd in your code:

contents.forEach((slide, i) => {

    gsap.to(contents, { ... 

You're looping through a bunch of element....and creating an animation for the SAME elements (all of them) a bunch of times. Did you intend to do that? I imagine maybe you meant to use "slide" as the target?

[davidsanchezart]

Hey Jack, thanks for replying. What I'm trying to do is add the text animation from the first slide (the fade-in and stagger) to repeat on the other slides, each time a new slide enters the viewport.  My most recent version uses a timeline with the onEnter callback.  I've updated the pen. Still, it seems like the timeline is playing throughout all the slides at the same time instead of individually.

 

Edited February 27, 2021 by davidsanchezart
misspelling. Sorry, it's really late.

[GreenSock]

Yeah, you set it up so that you've got ONE timeline that's animating everything in a staggered fashion so GSAP is doing what you told it to do, but if I understand you correctly (and I may not), you want each individual section to animate its content independently, right? So when the user scrolls to the red section, that content animates in, etc. 

 

If so, you're making one of the most common mistakes - you should do a loop through your sections and create a ScrollTrigger for each, with just their animation. It looks like you sorta tried that, but you only created the ScrollTriggers with no animation whatsoever, and then you created another big timeline with a stagger that animates ALL the sections. 

 

I think it might be best if you simplify things a bit just for the sake of understanding what's going on. You've got a TON of code in the HTML and CSS panels that's muddying things. And I'd strongly recommend being careful about using CSS transitions - definitely don't apply them to anything that GSAP will be animating. 

 

I was confused by why you had a bunch of "snap" values applied to various different ScrollTriggers. I suspect that all but the last one were totally unnecessary. 

 

Maybe when you read that "common mistakes" article, the light bulb will go on. If you still need help, though, please provide a simplified demo and we'd be glad to help. 👍

[davidsanchezart]

This really helped and it works now that I added the loop. I should print this "Common Mistakes" page and hang it next to me. As for the html, I agree, it's messy. I used an svgator to make the background animation but (based on their docs) I have to have the svg inline  in order for it to play on load. It's pretty bad and I do plan to rework it with gsap.