Dennyno

Hi guys, I've seen many tutorials and demos but still got issue while trying to make my codepen working. I may need to make my section horizontal scroll from right with scrub, but.... it simply stays there. I dont know if it's better to make the container to scroll, or it's inner columns. (guess the second) Btw none of'em works on my example. What am I missing? Thanks for any help.

Hi all, here https://staging11.whynot.media/su-di-noi/ I followed (ehmm... forked ?) GSAP official DEMO, as you can see here: https://codepen.io/GreenSock/full/wvKwZXG But cant understand 2 things: why on my page the grid jumps to right how to show the content above/below ? It seems on my page, which is the replica of the demo, the content is eaten by the grid container, or it's literally too far (more than 1900px on my laptop) why the gsap zoom-out function starts working, and then after a deep scroll... seems a bug, the grid jumps below, already scaled. Really Thanks for any help!

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

EDIT: updated the codepen https://codepen.io/DedaloD/pen/QWgVqJa

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.

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

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

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: https://codepen.io/DedaloD/pen/QWgVqJa 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

Hi, thanks for replying I guess I can't upload the whole website on Codepen, but I am open to pay for having support. Do you offer this kind of support?

Hi, thank you for your help. Yep it was a typo, thanks. But even with the right class, it seems not working. The element moves up, but stay there, is not moving as parallax. Could this been caused because my body is not moving, but instead I have a container that already is based on gsap? The container's classname is "scroll-content" which already has its transform-translate3D onscroll (by gsap) ?

Hi all, I am new at GSAP, even I love this framework and I've always seen many Codepens with it. I set this script on my website: https://whynot.media/2020/su-di-noi/ gsap.to(".parallax_speed2", { //img yPercent: -200, ease: "none", scrollTrigger: { trigger: ".contenitore_parallax", //container scrub: true }, }); To make the middle image you can see at bottom to scroll slower (or faster) than 2 others. But my script gives an undefined. Could someone help please?