julianlbch

Was my issue - for everyone else that may encounter this issue: My images where loaded too late and therefore the Starting Point of the Animation was way too early!

Dear Members, i currently try to get gsap to work with svelte, i ensure that the Page is completely loaded before the Animation is initialized but if i initially load the Page, the Animations starts too early on the Scroll Track. If i change the Route and then change it back everything works perfectly. I also ensured that in both cases all other Components / Images etc. are loaded completely. Does anyone may had the same issue? Thanks in advance! Here is my Svelte Component Code: const initTween = () => { tween = gsap.to( element, { xPercent: -100, x: () => width / 3, ease: "none", scrollTrigger: { trigger: element, start: "top top", end: () => width, scrub: true, pin: true, invalidateOnRefresh: true, anticipatePin: 1 }, onUpdate: function() { this.ratio > 0 && this.ratio < 1 ? showOverlay = true : showOverlay = false } } ); } onMount( async () => { console.log("init component") initTween() })

Hey there, thank you both! I will try to only set the Event Handler once, maybe this solves the issue. Also the start definition! If it does not solve the Problem i will create a CodePen!

Hey there, im pretty new to GSAP and ScrollTrigger but i tried to animate the Columns in the video to scroll horizontally by scrolling down. Im facing a weird issue while scrolling down, the Pin jumps on start and end as you can see in the Video. I did not add any margin to the Sections. Below you can find my JS Code. Thank you! $(window).on("load resize", function (e) { events() }); function events() { $('.events').each(function () { let $this = $(this), wrapper = $this.children('.events-wrapper'), height = $(window).height(), events = $(this).find('.event'); $(wrapper).css("min-height", height); let duration = 4, sections = gsap.utils.toArray(events), sectionIncrement = duration / (sections.length - 1), event = gsap.timeline({ scrollTrigger: { trigger: wrapper, pin: true, scrub: 0.3, start: "top", end: "+=1000", } }); event.to(sections, { xPercent: -50 * (sections.length - 1), duration: duration, ease: "none" }) .to({}, { duration: 0.5 }); }) } gsap_problem.mp4