ScrollTrigger animation 1 - Newbie 0

[Rhapsody]

Hello everyone,

 

I am extremely new to GSAP,  and want to create an animation where, when the user scrolls, "Web design" shows on the center, as they continue scrolling, it splits to show the description inside (top shows top/half on web design, bottom shows bottom half, ccntent in the center, max width being that of the title). As they continue scrolling, "Graphic Design" scrolls in horizontally (from the right), pushing "Web design off screen (to the left). On continued scroll, it too splits to reveal the description. On scroll, Graphic design scrolls left, off screen, and scrolling moves on to next section of the website. I achieved part of it; however, there is a weird jump as each stage scrolls off screen, and a long delay between Web Design scrolling off screen, and Graphic Design scrolling in. Below is my code. How can I make it not have such an empty gap?

 

Things to note:

1. I am doing this in a Wordpress installation, using Elementor Pro plugin

2. I'm adding the GSAP as custom code under </body>

3. Looks very broken in CodePen
 

 

See the Pen ogxyqYN by PV-the-decoder (@PV-the-decoder) on CodePen.

[mvaneijgen]

Hi @Rhapsody welcome to the forum!

 

The best thing to do when working 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 back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

 

 

Personally I always start with all my animations on a place like Codepen, just to test my animation in its basic form with pure HTML, CSS and JS to make sure my animation is working as expected and not my framework or in this case platform is trowing errors. This also makes it really easy to debug, because you have a known working version and next to that you can easily share a version on places like this to ask for feedback when you get stuck.
 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

Here is a starter template which loads all the plugins how Codepen expects them 

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

 

If I were you I would take a look at my post above, it is not the same effect, but the logic will also apply to your setup. I've forked your pen and applied some quick modifications to get it how I would set it up. I've also placed some comments in your JS to explain certain properties, be sure to read through them.

 

Hope it helps and happy tweening! 

 

See the Pen emZjJxZ?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

 

[Rhapsody]

Thanks! I will check the animation you shared and go from there.