Dennyno Posted September 23, 2021 Share Posted September 23, 2021 Hi all, I've read many post on the forum and docs, and I still can't find a solution to the task I may need to achieve. (But don't worry, it's me... 😅) Btw, I need two things: 1) scrolltrigger must fade each element 2) timeline to add the tagger/scrub effect back and forth. I dont know if it's the right mix: Btw the code works smoothly, just I cant figure how to make each single element starts (with delay) after the previous one. Actually the animation starts by "row", even I set a forEach... what am I missing? Thanks for helping See the Pen QWgVqJa by DedaloD (@DedaloD) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted September 24, 2021 Solution Share Posted September 24, 2021 Are you looking for something like this?: See the Pen QWgVBgZ?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Dennyno Posted September 24, 2021 Author Share Posted September 24, 2021 Wow, thanks! I still got to read and learn so much... 🙂 Just one thing, I tried changing values but cant figure how to mate transition slower, actually seems a wall in face. Just tried, for fun //{ stagger: 205, duration: 205} What's the use of timeline than? (Just to know, cause the results is "near" the same)... Thanks Link to comment Share on other sites More sharing options...
Cassie Posted September 24, 2021 Share Posted September 24, 2021 Currently you have scrub:true set - so the duration is tied to the scroll speed/progress If you remove that you'll be able to change the duration. Try it out, it's nice and easy to see the difference ☺️ 1 Link to comment Share on other sites More sharing options...
Dennyno Posted September 27, 2021 Author Share Posted September 27, 2021 Hi all, thanks. It works perfectly. Going deep: If I add a second <ul> // <ol> (on the same page) and I replicate the code, changing the selectors.. it doesnt work... Any hint please? let main_features_home = document.querySelector("ol.one-at-time"); if(main_features_home){ gsap.fromTo('ol.one-at-time li', { y: 50, opacity: 0 }, { opacity: 1, y: 0, scrollTrigger: { trigger: ".one-at-time", start: "top 70%", end: "bottom bottom+=70", scrub: true, markers: true, } }); } Got a list of text, and need to make each of'em fadeIn, as the previous code. But both doesnt work together. Full code then: /*gsap*/ gsap.registerPlugin(ScrollTrigger); //1 let main_features_home = document.querySelector("ol.one-at-time"); if(main_features_home){ gsap.fromTo('ol.one-at-time li', { y: 50, opacity: 0 }, { opacity: 1, y: 0, scrollTrigger: { trigger: "ol.one-at-time", start: "top 70%", end: "bottom bottom+=70", scrub: true, markers: true, } }); } //2 let cont_ul_clienti = document.querySelector(".griglia-clienti-home ul"); if(cont_ul_clienti){ gsap.fromTo('.griglia-clienti-home ul li', { y: 50, opacity: 0 }, { opacity: 1, y: 0, scrollTrigger: { trigger: ".griglia-clienti-home", start: "top 70%", end: "bottom bottom+=70", scrub: true, markers: true, } }); } Thanks all for helping Link to comment Share on other sites More sharing options...
Cassie Posted September 27, 2021 Share Posted September 27, 2021 It's hard to tell without seeing your markup Dennyno. I would imagine you've misspelled a class or something little like that. Pop a console log in to see if the element exists. let cont_ul_clienti = document.querySelector(".griglia-clienti-home ul"); if(cont_ul_clienti){ console.log('check if this is running') } Link to comment Share on other sites More sharing options...
Dennyno Posted September 27, 2021 Author Share Posted September 27, 2021 Hi Cassie, thanks. I post here, but gonna update also the codepen. It's just a second ol list: <ol class="one-at-time""> <li>TEXT 1</li> <li>TEXT 2</li> <li>TEXT 3</li></ol> Now, adding the second slice of code, all the elements appear together, just the container itelf seems fading. Link to comment Share on other sites More sharing options...
Dennyno Posted September 27, 2021 Author Share Posted September 27, 2021 EDIT: updated the codepen Link to comment Share on other sites More sharing options...
Cassie Posted September 27, 2021 Share Posted September 27, 2021 You removed the 'stagger' from the animation so it's animating them all at once. See the Pen powQxYw?editors=1010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Dennyno Posted September 27, 2021 Author Share Posted September 27, 2021 Hi thanks. For some reason the <ol> text list still appears all together.. "I solved" by removing the scrub and adding a duration. But in this way the reverse animation while scrolling up (scrub action) has gone... Thanks anyway 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