think

Hi OSBlake, thanks a lot! I really appreciate you investing your time in my problem. It works fine now!

Hello forum, I'm trying to add a step-by-step ScrollTo button to the given gsap scrollTo example: When the button is clicked, the content should scroll step-by-step to the following section. In the end, it should scroll back to the first item. This works well when you repeatedly click the button quickly. But when waiting for the animations end, each scrollTo starts from the container top again. I have no idea why this is happening. Maybe someone can give me a tip? The second thing is that I can't get the active class to work. Greeting Torsten

Hi Cassie, thank you so much for your reply! Your guidance was very helpful. Your my hero for today! my .css files are placed in head, the .js files in footer section on the wordpress/elementor page is also a swiper which loads posts. In the css the height was defined as 100% if the ScrollTrigger is underneath the swiper, he needs the swiper height before the content is loaded. Defining the height in css solved this problem for me. a callback afterInit the swiper to update the scroll trigger didn't help because the content isn't loaded at that point greetings, Torsten

Hi greensock forum, I try to implemented a scroll trigger SVG path on scroll animation example: https://codepen.io/GreenSock/pen/rNOBLBV (WIll be replaced by an own animation later) Due to it is integrated in a wordpress page, I can't replicate it on a codepen: http://wordpress.p462086.webspaceconfig.de/ PROBLEM: After first DOMContentLoaded the scroller does not know the height of the content. when resizing the window, it works APPROACH: I try to force ScrollTrigger.refresh(); like suggested in this thread: gsap.delayedCall(0.01, ScrollTrigger.refresh); But I don't know where to place the call. Could you please give me a hint? CODE EXAMPLE: ////////////////////////////////////////////////////////////////////////////////////////////////// document.addEventListener("DOMContentLoaded", function() { gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin, MotionPathPlugin); gsap.defaults({ease: "none"}); const pulses = gsap.timeline({ defaults: { duration: 0.05, autoAlpha: 1, scale: 2, transformOrigin: 'center', ease: "elastic(2.5, 1)" }}) .to(".ball02, .text01", {}, 0.2) .to(".ball03, .text02", {}, 0.33) .to(".ball04, .text03", {}, 0.46) const main = gsap.timeline({defaults: {duration: 1}, scrollTrigger: { trigger: "#svg", scrub: true, start: "top center", end: "bottom center", id: "svg", markers: true }}) .to(".ball01", {duration: 0.01, autoAlpha: 1}) .from(".theLine", {drawSVG: 0}, 0) .to(".ball01", {motionPath: {path: ".theLine", align:".theLine", alignOrigin: [0.5, 0.5], }}, 0) .add(pulses, 0); }); //////////////////////////////////////////////////////////////////////////////