tlemaitre27 Posted February 17, 2020 Share Posted February 17, 2020 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 More sharing options...
ZachSaucier Posted February 17, 2020 Share Posted February 17, 2020 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 More sharing options...
tlemaitre27 Posted February 17, 2020 Author Share Posted February 17, 2020 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 More sharing options...
ZachSaucier Posted February 17, 2020 Share Posted February 17, 2020 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 More sharing options...
tlemaitre27 Posted February 17, 2020 Author Share Posted February 17, 2020 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 More sharing options...
ZachSaucier Posted February 18, 2020 Share Posted February 18, 2020 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 More sharing options...
elegantseagulls Posted February 18, 2020 Share Posted February 18, 2020 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. 2 Link to comment Share on other sites More sharing options...
tlemaitre27 Posted February 18, 2020 Author Share Posted February 18, 2020 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% On my codepen code, often it's fine tho but sometime I get the bug too , 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 More sharing options...
ZachSaucier Posted February 18, 2020 Share Posted February 18, 2020 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. 1 Link to comment Share on other sites More sharing options...
tlemaitre27 Posted February 18, 2020 Author Share Posted February 18, 2020 It works like a charm !! Everything make sense now thank you a lot 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now