Search the Community

Hey GSAP Community, I'm currently working on a page transition using GSAP's flip plugin, and I'm encountering an issue where the element seems to "jump" from a lower position during the transition, which affects the UX. I'm using Barba.js for page transitions, and GSAP/Flip are used to animate the transition. The element in question is cloned and moved to a new container during the transition. I've attached a video that better explains my problem, and here's my JavaScript code that handles the transition. If you need more elements (HTML content, styles), don't hesitate to let me know! gsap.registerPlugin(ScrollTrigger, CustomEase, Flip); const $ = (el) => document.querySelector(el) let scroll; const BASIC_DURATION = 1.2; let transitionOffset = 1100; let staggerDefault = 0.07; CustomEase.create("primary-ease", "0.42, 0.1, 0.05, 0.89"); CustomEase.create("primary-ease-out", ".34, 1.56, 0.64, 1"); function leaveWorkSingle(container) { const tl = gsap.timeline({ default: { duration: BASIC_DURATION, ease: "primary-ease" } }) let transitionElements = document.querySelector('.transition-work-single'); let transitionElementsFooterImage = transitionElements.querySelector('.img-next'); let cloneTransitionElements = transitionElements.cloneNode(true); let transitionElementsNewContainer = document.querySelector('.transition-work-single-container'); let transitionElementsOldContainer = document.querySelector('.transition-work-single-old-container'); let transitionElementsState = Flip.getState(".transition-work-single"); transitionElementsNewContainer.classList.add('transitioning'); transitionElementsNewContainer.appendChild(transitionElements); transitionElementsOldContainer.appendChild(cloneTransitionElements); tl.set('main.main', { autoAlpha: 0 }) tl.add(Flip.from(transitionElementsState, { ease: "primary-ease", duration: 1.2, absolute: true, }), 0.5); tl.set(cloneTransitionElements, { autoAlpha: 0 }); } function enterWorkSingle(container) { // todo const tl = gsap.timeline({ default: { duration: BASIC_DURATION, ease: "primary-ease" } }) tl.set('main.main', { autoAlpha: 1, onComplete: () => { console.log('done') let r = $('.transition-work-single-container.transitioning .transition-work-single') console.log(r) r.remove() } }) } function delay(n) { n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n); }); } function initLenis() { scroll = new Lenis({ duration: 1 }) scroll.on('scroll', ScrollTrigger.update) gsap.ticker.add((time) => { scroll.raf(time * 1000); }) gsap.ticker.lagSmoothing(0) } function initTransitions() { history.scrollRestoration = "manual"; barba.hooks.afterEnter(() => { window.scrollTo(0, 0); ScrollTrigger.refresh(); }); barba.init({ sync: true, debug: false, timeout: 7000, transitions: [ { name: 'from-to-work-single', from: { namespace: ['work-single'] }, to: { namespace: ['work-single'] }, async leave(data) { leaveWorkSingle(data.current.container); await delay(1700); }, async enter(data) { enterWorkSingle(data.next.container); }, async beforeEnter(data) { // ScrollTrigger.getAll().forEach(t => t.kill()); initSmoothScroll(data.next.container); // initScript(); }, } ] }); function initSmoothScroll(container) { initLenis(); ScrollTrigger.refresh(); } } initTransitions(); Thank you in advance for your help. w_ybkKeqbJ.mp4

I have a section with the height of 100vh and pin it as follows: ScrollTrigger.create({ trigger: ".styleselectcontainer", start: "top top", pin: true, pinSpacing:false, }); Directly after that follows the next section with normal scrolling. How can I control that this section does not scroll directly above the pinned section when the pin fires? I want to achieve that the user has to scroll/swipe a little bit until the second section starts scrolling.