mariovde

Fixed it by adding code to the scrolltrigger. ? onLeave: self => { let scroll = self.scroll() - (self.end - self.start); self.kill(); self.scroll(scroll); tl.progress(1); },

Thanks for the reply! looks good! When I add "once:true" to the scroll trigger, when pinSpacing:true is also set, there is a lot of margin between the sections. any idea how to solve that?

hi all, I'm having trouble getting pinned sections to work. My page will consist of 6 sections. For debugging purposes, I've created a codepen with only 3. When the second section hits the top of the window, I want it to be pinned. When scrolling further, the section remains pinned, each of the list items needs to get the class "active" and the corresponding block on the left side needs to fade in. When all 3 bullets (and thus divs) have been faded in, the pinned section gets unpinned and the user scrolls further to the next section I cannot get my head around how to do the separate bullet animations. And why the last section overlaps the middle section... I've looked through all examples for scrolltrigger and forum regarding overlapping, but nothing helped so far, to solve this... any help would be appreciated! Thanks!

Thanks for the reply and extra info! Got it to work ! will also check the react guide ?

Ok, the fix is using .fromTo This code works... but when I change the 0.7 to sectionone_phone_shadow_ref.current.style.opacity, it doesn't work... I want to use the value of the CSS as my starting point, instead of hard-coding the start value in the animation. const parallax_animation_phone_shadow = tl.fromTo( sectionone_phone_shadow_ref.current, { opacity: 0.7, }, { opacity: 0, scrollTrigger: { trigger: "#sectionOne", start: "31% 30%", scrub: true, markers: true, }, }, );

Hi all, Getting my feet wet with GSAP for the first time and the results look promising BUT... I am bumping into an opacity issue. I have a shadow-png positioned underneath another image (phone). What I am trying to do is, when the phone moves up, I want the shadow png to become more transparant. But, when that animation starts, the opacity is immediately 0, instead of animating to 0. The animations here are: - a laptop slides in from the left - a phone slides in from the right - the phone's shadow slides in as well - when the scrolling begins, the phone needs to move up - and the shadow needs to become more transparent. And that last animation immediately starts at 0. What am I doing wrong? Thanks for the advice! useLayoutEffect(() => { const laptop_animation = tl.from(sectionone_laptop_ref.current, { left: "-200px", opacity: 0, delay: 1, }); const phone_animation = tl.from( sectionone_phone_ref.current, { left: "480px", opacity: 0, }, "<", ); const shadow_animation = tl.from( sectionone_phone_shadow_ref.current, { left: "480px", opacity: 0, }, "<", ); const parallax_animation_phone = tl.to(sectionone_phone_ref.current, { top: "0px", scrollTrigger: { trigger: "#page", start: "top top", end: "+=100%", scrub: true, }, }); const parallax_animation_phone_shadow = tl.to( sectionone_phone_shadow_ref.current, { opacity: 0, scrollTrigger: { trigger: "#sectionOne", start: "31% 30%", scrub: true, markers: true, }, }, ); return () => { phone_animation.kill(); shadow_animation.kill(); laptop_animation.kill(); parallax_animation_phone.kill(); parallax_animation_phone_shadow.kill(); }; }, [ sectionone_laptop_ref, sectionone_phone_ref, sectionone_phone_shadow_ref, ]);