Jump to content
GreenSock

tlemaitre27

Trigger animation to class elements without scrollmahic

Recommended Posts

Hi! 

 

I'm using the plugin SplitTextJs to create an animation reveal to my titles (you can how I'm doing it in the Codepen). I'm doing this animation on many elements and I want to trigger the animation when the element is in the viewport. With some research I saw that I need to do some loop and a lot of people are doing that with scrollmagic. I was wondering if it's possible to do it without scroll magic. The reason is that I have already many script loaded and I want to have the less script possible to load especially if I'm using it for little things.

 

Thank you :)

See the Pen mdJbmYe by tlemaitre (@tlemaitre) on CodePen

Link to comment
Share on other sites

Hey tlemaitre27 and welcome to the GreenSock forums!

 

11 minutes ago, tlemaitre27 said:

I was wondering if it's possible to do it without scroll magic.

Definitely! It will perform better and likely be more intuitive to set up to do it without Scrollmagic :) The key is to use intersection observers. Here are some related threads that should be able to help you depending on the exact effect you want:

 

 

Let us know if you have any specific questions or run into issues :) 

Link to comment
Share on other sites

Thank you Zach for your input and the resources :)

I changed my code based on a comment and a codepen you made in this tread. I have update my codepen if you want to see my changes. But now I got a problem, my animation is working but is not trigger by the IntersectionObserver. When I open the console, I see this error Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'. On line 44. I don't understand because the targets i want to observe are the children of my list from document.querySelectorAll()

Thank you

Link to comment
Share on other sites

14 minutes ago, tlemaitre27 said:

When I open the console, I see this error Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'. On line 44. I don't understand because the targets i want to observe are the children of my list from document.querySelectorAll()

You set el = to the timeline, so it no longer refers to the element. I would set el.tl = to the timeline and then refer to that for the element in your intersection observer. 

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

Link to comment
Share on other sites

Thank you but there some things that I don't understand. Why put el.tl if in the version 3 of gsap we can not do that and simply have myElement = gsap.timeline() (like I did in my initial code - that is in comment at the bottom of the script). Plus, I did what you said, but the trigger still not working and all my text disapear when i'm scrolling (like your demo on your codepen

 

Link to comment
Share on other sites

3 hours ago, tlemaitre27 said:

Why put el.tl if in the version 3 of gsap

el.tl is not a part of GSAP. It's just attaching a reference of the timeline to the element.

 

3 hours ago, tlemaitre27 said:

simply have myElement = gsap.timeline() (like I did in my initial code - that is in comment at the bottom of the script)

That's not what the code is doing at the bottom of the script. The code at the bottom of the script is saving it to a variable. It's pretty much the same thing but not attached to an element.

 

4 hours ago, tlemaitre27 said:

Plus, I did what you said, but the trigger still not working and all my text disapear when i'm scrolling (like your demo on your codepen

That means that the intersection observer is working :) Just need to split the text for each element and only animate that text:

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

Link to comment
Share on other sites

Also, to be noted: I know it's not being used here, but rootMargin doesn't work as expected (in my experience) in CodePen, unless you're in debug mode.

  • Like 2
Link to comment
Share on other sites

Thx elegant for the tip :)
Tank you a lot Zach for your help! I understand more the logic behind. But I still don't understand why you put the creation of the split inside the loop? I mean, var outerSplit = new SplitText($('.titles'), { type: 'lines' }) automatically split the lines for all the elements with the class titles no? Another problem I have is that the the xOffset is not working well. It look like the stagger made the line not to fully translate at -100%

image.png.4c255ebba5acce4c4e717528d538f429.png

On my codepen code, often it's fine tho but sometime I get the bug too

image.png.ff886a60bfaa11c6c28fd1f343a34124.png

, as well as your code pen.

 

There is also the onComplete method that is not triggered when the animation is complete

Link to comment
Share on other sites

12 minutes ago, tlemaitre27 said:

I still don't understand why you put the creation of the split inside the loop? I mean, var outerSplit = new SplitText($('.titles'), { type: 'lines' }) automatically split the lines for all the elements with the class titles no?

Yes, it creates the split for all of them. But saving them to the same variable means that when you try to animate them, it will animate all of them at once. Including it in the loop and scoping it to the particular element makes it so that all still get split but they don't all animate together. Does that make sense?

 

12 minutes ago, tlemaitre27 said:

Another problem I have is that the the xOffset is not working well. It look like the stagger made the line not to fully translate at -100%

Both this problem and the one related to the onComplete are caused because you have the parameters for the timeline wrong :) You're passing in the element as the first parameter, which isn't valid for a timeline. I missed that the last time around.

// el.tl = gsap.timeline(el, { // Bad
el.tl = gsap.timeline({ // Good!
  paused: true,
  onComplete: () => {
    innerSplit.revert()
    outerSplit.revert()
  }
})

Fixing that fixes the issues.

  • Like 1
Link to comment
Share on other sites

It works like a charm :) !!

Everything make sense now thank you a lot

  • Like 1
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.
×