Jump to content
Search Community

How to trigger multiple elements at the same time?

DavidLew test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

 

I am trying to add a Text Reveal animation. But, the height of each text is different. So, I have to use multiple divs for them. I tried to add CSS active to each div's animation. However, GSAP seems can only add one active to the first class. Not all the classes are with the same name. How can I make it scroll to the first line of the text and trigger all the animation for different lines of text simultaneously? Thanks.

See the Pen jOZVLBa by yinanlu0112 (@yinanlu0112) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @DavidLew, welcome to the forum!

 

I had a bit of trouble reading your code, so I had to remove a lot of code to make it easier to explain.

 

Instead of `:after` and `:before` elements I've just created `.box` elements within each text element, these are much easier to animate with GSAP. Also you are now using GSAP so no need to create complicated CSS animations, let GSAP handle that for you!

 

If you want to use scrollTriggers the best thing to do is create a timeline. Then within that timeline create your scrollTrigger. This way the whole timeline will be played when the ScrollTrigger fires

 

What I now did for your demo is styled each box to be black and overlap your text and as soon as the ScrollTrigger fires scale those `.box` elements to to zero. I've add a `stagger: 0.3` to the animation so that each `.box` will animate `0.3` seconds after the previous one. If you want them to animate all at one remove the stagger from the code.

 

To show you how you could add more animations to this timeline I've add an extra animation that will move the text 100px to the right after the boxes are finished animating. This of course you can remove (or tweak)

 

I really recommend starting a few GSAP tutorials to get a better understanding of the basics of GSAP, there is a lot of great content on Youtube. I would recommend SnorklTV  as a place to start.

 

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

 

Hope it helps! And if you get stuck please feel free to come back here and ask more questions. 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Hi mvaneijgen,

 

Thank you so much. I'm just starting to learn GSAP and haven't figured out how to use the timeline. So, that's helped a lot. However, I got one more question. I am trying to add a scale-up to the right first, and after the scale-up-right animation shows the text with a scale-down-right. But, before users scroll to the text, they cannot see any text on the screen. Can I add one more scaleX: 100 to aboutBodyTimeline to make it scale up to the right first?  Or I need to create another box with scaleX 100 before this one? Thanks again.

aboutBodyTimeline.to(".box", {
    scaleX: 0, // scale the boxes to a width of 0
    transformOrigin: "center right", // scale down to the right
    // stagger: 0.3 // small delay between each .box
});

 

Link to comment
Share on other sites

Cool. I love to help but try and fork my pen and try your luck.

 

Just try and get something working and when you get stuck post your pen with the not working code, then we'll point you in the right direction. I'm not trying to withhold information, but this is the way how I learned and if we see how you think it's easier help nudge you in the right direction.

Link to comment
Share on other sites

Hi mvaneijgen,

 

I tried to add opacity. First, I set the opacity of aboutBody to 0, then added opacity 1 in ScrollTrigger. But it doesn't work as usual.

 

Ok, I am gonna read the article about `.from()` first. Thanks.

.aboutBody {
    padding-top: 100px;
    opacity: 0;
}
const aboutBodyTimeline = gsap.timeline({
    scrollTrigger: {
        trigger: ".aboutBody", // Start of the
        start: "top center", // Start animation when the top of .aboutBody hits top of viewport
        // scrub: 1, // 1 second delay between scroll and animation
        markers: true, // show markes, easier for debugging
    }, opacity: 1
});
Link to comment
Share on other sites

I was hoping to see a pen with the code instead of code blocks here. 

 

If you don't find a solution I would focus on just one part of the animation and get that to work and then you have a clear question to ask.

 

Indeed having the text hidden and then shown was a tricky one. I'd to modify your HTML to include some new `<span>` elements surrounding the text, I then hide this text with CSS `.text { visibility: hidden; }`. This is why timelines are great! I first draw the boxes `.from()` a `scaleX` of `0` then I `.set()` the visibility of the `.text` class to visible and then the rest of the animation plays. 

 

This is basic GSAP stuff, but hard if you are a beginner, I really recommend doing some tutorials first and really try your hand at writing your own code, before you tackle your own custom animations.

 

See the Pen poaNKOM?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

  • Thanks 1
Link to comment
Share on other sites

 

Hi mvaneijgen,


Sorry for the inconvenience caused by unclear questions. The channel you recommended is fantastic! It makes 'form' and 'to' incredibly easy. Add one more timeline with 'from' immediately solving the scale-up and scale-down problem.

 

 However, the text opacity still doesn't work correctly. When I add the opacity text timeline after scale-up animation, the animation is overridden by the opacity of text. 

 

If comment out the text opacity timeline, the animation works perfectly. 

 

See the Pen rNJWrxW by yinanlu0112 (@yinanlu0112) on CodePen

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...