LouUXPD Posted October 12, 2022 Share Posted October 12, 2022 Hi, I created an animation with scroll trigger (complex for me). Scrolling the section becomes fixed, and I have 2 different animations that repeat for 3 blocks. The animation I made works, but I wanted to use the optimized code for learn and correct. Thanks See the Pen PoeXemq by LouUXPD (@LouUXPD) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 12, 2022 Share Posted October 12, 2022 Hi @LouUXPD welcome to the forum! Quote If it works it works! I really like @Cassie her quote. No need to dwell over if things can be better. If you want some thing to improve there is a property called xPercent and yPercent if you want to work with percentages instead of using the x and y percent, but the rest looks fine! 2 Link to comment Share on other sites More sharing options...
LouUXPD Posted October 12, 2022 Author Share Posted October 12, 2022 Thanks! just wanted to figure out how to be able to learn code using forEach or something else. Another Request: I should have another animation (under this) with scolltrigger .. however, but start in the middle of this animation (the markers in fact arrive earlier), how can I correct? Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 12, 2022 Share Posted October 12, 2022 26 minutes ago, LouUXPD said: just wanted to figure out how to be able to learn code using forEach or something else. Just do it! You can easily fork your pen so that you don't lose your progress and try things out! 27 minutes ago, LouUXPD said: I should have another animation (under this) with scolltrigger .. however, but start in the middle of this animation (the markers in fact arrive earlier), how can I correct? Do you have a minimal demo, hard to guess from your description what could go wrong Link to comment Share on other sites More sharing options...
LouUXPD Posted October 12, 2022 Author Share Posted October 12, 2022 it's hard to explain, I apologize. I have this animation that is fixed with pin:true, once it ends (so I go to the section below), a second and different animation should start. The problem is that the second anim during the scrolling of the first, in fact the markers are long before the actual section arrives. How can I do? <section class="change-color" data-color="#7543ad"> ..first animation </section> <section class="change-color" data-color="#076b49"> ..second animation </section> //first is: const composeTl = gsap.timeline({ scrollTrigger: { trigger: ".active-compose.first", start: "center center", scrub: 1, pinSpacing: true, pin: true, } }); ecc.... //second anima (does not start correctly, -- he starts when the first one has yet to finish) const borderLine = gsap.utils.toArray(".borderLine"); borderLine.forEach((line) => { gsap.to(line, { // x: 100, scrollTrigger: { trigger: line, start: "top 70%", markers: true, onEnter: () => $(line).addClass('animated'), } }) }); Link to comment Share on other sites More sharing options...
Rodrigo Posted October 12, 2022 Share Posted October 12, 2022 Hi, Maybe the image in that section is being loaded after the ScrollTrigger instance has been created, this could create a layout shift that causes the start/end points being misplaced. Perhaps a font is being loaded or some section is being lazy-loaded. Think of anything that could be causing a layout shift after ScrollTrigger makes all the calculations. Another cause could be animating the top/bottom position/margin/padding on some element as well as Y or yPercent. As you can see there are a few things that could be causing this, that is why @mvaneijgen asked for a minimal demo, other wise we are troubleshooting blind here. Happy Tweening! Link to comment Share on other sites More sharing options...
LouUXPD Posted October 13, 2022 Author Share Posted October 13, 2022 I had replicated the animation on codepen, but it worked for me. Only difference? The code of the second animation was put after the code of the first. I replied on the site .. and it works!! But it makes no sense I think. But now it works. (strange) Thanks to all interested 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