michael_feh

thanks for quick answer. i will build a demo as soon as it seems like a have an individual problem. at the moment it seems more like im missing some basic concepts of scrolltrigger. lets take this demo as example: https://codepen.io/GreenSock/pen/gOBRBaM 1) is the "debug view" the "full page view"? 2) when i use chrome to open full page view of the demo, scroll down a bit and reload, the page reloads from top position. why ist that? 3) "creating ScrollTriggers in the order they'd happen on the page" and "seen that you're using loops and thus the order in which the ScrollTriggers are created do not reflect the order on which they appear on the page" is hard for me to understand. using loops directly means that the order in which the scrolltiggers are created dont reflect the order of the elements on the page? 4) the demo uses a for each loops as well, right? i cant really test this now ( see 2) ) but why doesnt this loop cause any issues? 5) how would you work without loops? lets say we have a simple unveil animation like i have in my script. and this is used for all kinds of elements on the page (20-30 elements). if i cannot use the for each loop to map this animation to every element that has the unveil class. how would i do it? write 30 gsap.from with scrolltrigger snippets? one for each element? 6) i understand that the order matters to calculate the position for lower elements in the dom. but as i said, in my case everything works fine and is positioned correctly. the problems only occur when i reload the page with a lower scroll position. why does this reload scroll postition have an impact on the calculations or break the animations completely? any help much appreciated!

Hey there, i have build a website with lots of scroll trigger animation. unveils, split text, pinned sections etc. i just started cross browser testing and noticed that on chrome(mac) when i scroll down a page and then reload, lots of stuff breaks: - pinned sections are misplaced - the scroll position of the page itself changes on reload - other effects stop working completely I can't really put together a codepen for this, because when you reload a codepen the result always starts with scrolposition top. Has anybody ever experienced something like this? Is this a common problem with chrome? Am I doing something completely wrong? Any help much appreciated. Here is the footer part that contains all animation script: <script src="<?php echo get_stylesheet_directory_uri(); ?>/src/gsap/gsap.min.js"></script> <script src="<?php echo get_stylesheet_directory_uri(); ?>/src/gsap/ScrollTrigger.min.js"></script> <script> /* navpoint */ $('.navpoint2').addClass('activenavpoint'); /* logo color */ var headerLogo = document.querySelector('.headerlogo'); var hueValue = Math.floor(Math.random() * 360); headerLogo.style.filter = 'hue-rotate(' + hueValue + 'deg)'; /* register gsap */ gsap.registerPlugin(ScrollTrigger); /* unveil classes */ let unveilfade1 = gsap.utils.toArray(".unveilfade1"); unveilfade1.forEach((uvf1, i) => { gsap.from(uvf1, { autoAlpha: 0, ease: "power1.out", duration: 2, scrollTrigger: { trigger: uvf1, start: "top 90%", end: "top 90%", } }); }); let unveilfade2 = gsap.utils.toArray(".unveilfade2"); unveilfade2.forEach((uvf2, i) => { gsap.from(uvf2, { autoAlpha: 0, ease: "power1.out", duration: 2, delay: 0.3, scrollTrigger: { trigger: uvf2, start: "top 90%", end: "top 90%", } }); }); let unveilfade3 = gsap.utils.toArray(".unveilfade3"); unveilfade3.forEach((uvf3, i) => { gsap.from(uvf3, { autoAlpha: 0, ease: "power1.out", duration: 2, delay: 0.6, scrollTrigger: { trigger: uvf3, start: "top 90%", end: "top 90%", } }); }); /* pinned panel */ gsap.utils.toArray(".panel").forEach((panel, i) => { ScrollTrigger.create({ trigger: panel, start: "top top", pin: true, pinSpacing: false, markers: true }); }); </script>

thanks for guiding me in the right direction. i got the job done with Inertia. 🙏

the problem is, i need many of those slider elements on one page. i have gotten this far: https://codepen.io/frontendhomie/pen/KKYVLKz the next, prev, random button still work, but the dragging and snapping seems off. help please

hey there, i have edited a slider codepen of yours to make if fit for my case: https://codepen.io/frontendhomie/pen/oNObOry this seems to work fine.

@Rodrigo even better. becuase the letters actually change colour as in the example. is it even possible to change the color twice to generate a fade/blend effect? would i need to have various ".set"s or what would be the right approach? also, if i get the pricing right: to use split text on a production site is 149$/y, right?

❤️

hey there, i just started messing around with gsap and scroll trigger and im already loving it. i need some effects for a website and almost got everything running with gsap and ScrollTrigger except for this one effect. you can see it in action here: https://www.nembodesign.com/ its this font color changing effect on scroll of the first paragraph "We know that developing a new project is a complex..." I think you would have to split the text into characters with SplitText and animate the color with gsap.to + ScrollTrigger + scrub. But i cant find a way to animate all characters individually based on the scroll position of the paragraph. Does anybody know how do do this? Kind regards, Thanks in advance, Michael