Slideshow with splitText and logo

[nThenSome]

I have been working on a banner slideshow that has SplitText animation on each slide. Going through your forms, I have found and forked on CodePen a slideshow that is close to what I am doing. I have figured out how to animate the text on each slide. However, there is a logo that is animated on all the slides, but I can’t seem to get it to show up on any but the first slide. I have also tried creating two separate functions for the logo and the text, but that just breaks the whole animation. I am new to JavaScript and GSAP and have been trying to figure this out for quite some time to no avail. Any help or advice would be appreciated.
Thanks...

See the Pen MWKXvWm by nTSM (@nTSM) on CodePen

[ZachSaucier]

Hey nThenSome and welcome. 

 

A key principle that I encourage you to learn while programming is the DRY (don't repeat yourself) principle. Your JavaScript is pretty DRY because of your use of looping and functions (good job!) but in your HTML do you really need the entire SVG logo repeated inline every time? If I were you, I'd save it to a .svg file and include it in an <img> tag since you're not animating parts of the SVG independently.

 

You should also try to avoid animating properties that aren't very performant such as top - stick to y or yPercent instead.

 

Another thing to work on is your code formatting. It really does help, not only in finding issues and modifying code, but it also helps people who look at your code (like us ). 

 

I also noticed several code errors:

• staggerFrom is invalid in GSAP 3 - use regular tweens with the stagger property instead.
• tranformOrigin should be transformOrigin. And you are only allowed to have two values there (like "50% 50%"), not three.
• The duration should go inside of the vars parameter so that you can use features like GSAP's defaults.
• You try to refer to "element" in one of your tweens but there's no element with a tag of <element> for it to select.

You can catch mistakes like these by 1) having cleaner code and seeing them and 2) using your developer tool's console to see errors and warnings.

 

Past that, I highly recommend making use of the repeat property of timelines. That way you don't have to just use callbacks and worry about resetting properties manually each time.

 

As for your issue of the animation not happening for the logo, the issue is that your target is the generic "svg" which selects all of them and not scoped to that particular slide. Since you're using a relative tween, as of the second slide it's going from the target values to the target values, so no animation happens.

 

With all of that being said, here's how I'd set it up:

See the Pen GRoYGjK?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I talk about a lot of this in the articles about the most common GSAP mistakes and animating efficiently. I highly recommend them as they're packed with good information  

[nThenSome]

Hey Zach,

Thanks so much for the help and advice. I read your articles when I first started using GSAP. I'll read them again now that I have been using GSAP for awhile, and I'm sure I will get more out of them.
Again thanks for your help.