runejensencom

With the help of Slater. app AI for Webflow, asking the right questing and mention the _align code that gave trouble, like you said Rodrigo - it came with a solution that did all the magic and it works perfectly now with no errors. Thank you for pointing me in the right direction. It was this code. barba.hooks.leave(() => { if (tween) { tween.kill(); } });

Thank you. I will try and look into that. If I can't figured it out, I will create a minimal demo and come back. Something I noticed: Once the slideshow completes all 5 images and repeat first time, transitioning to a different page does not trigger any errors. It only happens when transitioning to a new page before the initial 5 image cycle is completed.

I'm currently in the process of setting up a slideshow utilizing timelines, morphSVG, and motionPath along with BarbaJS Page Transitions in Webflow.. Everything works flawlessly when I reload the page on all pages. However, I've encountered an issue when navigating from the homepage, where I've incorporated motionPath with a delay, to the about page. It seems that this transition breaks all animations. Interestingly, when I remove the delay from the motionPath, the animations function smoothly without any errors during navigation between pages. It appears that the delay within the motionPath is causing conflicts or disruptions during page transitions, leading to animation issues. If you have any insights or suggestions on how to resolve this issue, I would greatly appreciate your input. function slideshowAnimation(e) { let tween; function animateOnPath() { let progress = tween ? tween.totalProgress() : 0; tween && tween.revert(); tween = gsap.timeline({ repeat: -1 }); tween.to(".slideshow_item_large-5", { opacity: 1, duration: 0 }) .to(".slideshow_svg_large-5", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.5, end: 0.5 }, duration: 0 }, "<") .to(".slideshow_img_item_large-5", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.5, end: 0.5 }, duration: 0, }) .to(".slideshow_item_large-5", { duration: 0.5, ease: "cubic.out", opacity: 1, delay: 4 }) .to(".slideshow_svg_large-5", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.5, end: 0.8 }, duration: 1, ease: "cubic.inOut", delay: 0 }, "<") .to(".slideshow_img_item_large-5", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.5, end: 0.8 }, duration: 1, ease: "cubic.inOut", delay: 0 }, "<") .to(".slideshow_item_large-5", { duration: 0.5, ease: "cubic.out", opacity: 0, delay: 0.5 }, "<") .to(".slideshow_item_large-1", { duration: 0.5, ease: "cubic.in", opacity: 1, delay: 0 }, "-=1") .to(".slideshow_svg_large-1", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.2, end: 0.5 }, duration: 1, ease: "cubic.inOut", delay: 0 }, "<") .to(".slideshow_img_item_large-1", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.2, end: 0.5 }, duration: 1, ease: "cubic.inOut", delay: 0 }, "<") .to(".slideshow_svg_large-1", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.5, end: 0.8 }, duration: 1, ease: "cubic.inOut", delay: 4 }) .to(".slideshow_img_item_large-1", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.5, end: 0.8 }, duration: 1, ease: "cubic.inOut", delay: 0 }, "<") .to(".slideshow_item_large-1", { duration: 0.5, ease: "cubic.out", opacity: 0, delay: 0.5 }, "<") .to(".slideshow_item_large-2", { duration: 0.5, ease: "cubic.in", opacity: 1, delay: 0 }, "-=1") .to(".slideshow_svg_large-2", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.2, end: 0.5 }, duration: 1, ease: "cubic.inOut", delay: 0 }, "<") .to(".slideshow_img_item_large-2", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.2, end: 0.5 }, duration: 1, ease: "cubic.inOut", delay: 0 }, "<") .to(".slideshow_svg_large-2", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.5, end: 0.8 }, duration: 1, ease: "cubic.inOut", delay: 4 }) .to(".slideshow_img_item_large-2", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.5, end: 0.8 }, duration: 1, ease: "cubic.inOut", delay: 0 }, "<") .to(".slideshow_item_large-2", { duration: 0.5, ease: "cubic.out", opacity: 0, delay: 0.5 }, "<") .to(".slideshow_item_large-3", { duration: 0.5, ease: "cubic.in", opacity: 1, delay: 0 }, "-=1") .to(".slideshow_svg_large-3", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.2, end: 0.5 }, duration: 1, ease: "cubic.inOut", delay: 0 }, "<") .to(".slideshow_img_item_large-3", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.2, end: 0.5 }, duration: 1, ease: "cubic.inOut", delay: 0 }, "<") .to(".slideshow_svg_large-3", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.5, end: 0.8 }, duration: 1, ease: "cubic.inOut", delay: 4 }) .to(".slideshow_img_item_large-3", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.5, end: 0.8 }, duration: 1, ease: "cubic.inOut", delay: 0 }, "<") .to(".slideshow_item_large-3", { duration: 0.5, ease: "cubic.out", opacity: 0, delay: 0.5 }, "<") .to(".slideshow_item_large-4", { duration: 0.5, ease: "cubic.in", opacity: 1, delay: 0 }, "-=1") .to(".slideshow_svg_large-4", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.2, end: 0.5 }, duration: 1, ease: "cubic.inOut", delay: 0 }, "<") .to(".slideshow_img_item_large-4", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.2, end: 0.5 }, duration: 1, ease: "cubic.inOut", delay: 0 }, "<") .to(".slideshow_svg_large-4", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.5, end: 0.8 }, duration: 1, ease: "cubic.inOut", delay: 4 }) .to(".slideshow_img_item_large-4", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.5, end: 0.8 }, duration: 1, ease: "cubic.inOut", delay: 0 }, "<") .to(".slideshow_item_large-4", { duration: 0.5, ease: "cubic.out", opacity: 0, delay: 0.5 }, "<") .to(".slideshow_item_large-5", { duration: 0.5, ease: "cubic.in", opacity: 1, delay: 0 }, "-=1") .to(".slideshow_svg_large-5", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.2, end: 0.5 }, duration: 1, ease: "cubic.inOut", delay: 0 }, "<") .to(".slideshow_img_item_large-5", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.2, end: 0.5 }, duration: 1, ease: "cubic.inOut", delay: 0 }, "<"); tween.totalProgress(progress); } animateOnPath(); window.addEventListener("resize", animateOnPath); }

I figured it out. Works perfectly now as I wanted. I just need to add "scale: true" like this: let tl = Flip.from(state, {duration: 1, ease: "none", scale: true});

It works when I scroll below the end-markers, resize window and then scroll above end-markers and down again, then it refresh to correct size. Maybe it is something about refresh, when windows is resizing?

Hi akapowl and Rodrigo. I really appreciate your help. Rodrigo solution works the best with akapowl "end: `bottom-=${box.offsetHeight/2} center`,". Now it works perfectly like I want and it works great in Webflow. I want both box-one and box-two scaling proportional when box-one is pinned to the bottom of the container. But the EM scaling doenst work for box-one like box-two, when I resize the window. Any idea how to fix this? https://codepen.io/rune-jensen/pen/JjvLxXe

I struggle to find a solution with pinned elements flexbox animation from center to bottom, but I have manage to get it to work with ScrollTrigger.create Do you have any suggestion how to make it work? I want the element to pin from center to bottom, when it hit the center of the viewport in the container div.

Hi Cassie I took your advice and study more about GSAP and ScrollTrigger. I find a solution how to pin the element when it hits the center of the viewport, and after scrolling 200vh, it will reverse the animation just like in the demo I showed in the first post.

Hey guys So the code works fine when scrolling down and reverse after center of the viewport. Is it possible to add a pause to the animation, when the viewport hits the top of the container and start reverse after scrolling 200vh? and maybe add more div animations

I also got the same problem in Safari when resizing browser with ScrollSmoother enable. Can I also have this beta too?

One last thing: Is it possible to change the start value "0" - so it counts up from 1953 to 2022 and not 0-100?

Yes, that was exactly what I was looking for. It works great now. Can't thank you enough! Glad to be on board.

Hi guys - my first post here. I am working on a sticky progress bar and a sticky percentage counter for a website in Webflow, that should animate the same time while scrolling from the top to bottom of a section. The progress bar are working fine, but I haven't figure out yet how to get the count number start and end animate like the progress bar. Is this possible with another solution besides using - end:"500px" - in the gsap.timeline like I did? More precise - I want sticky counter number to trigger, when the viewport hits top of the container-large and stop animate, when the viewport hits the bottom of container-large. Hope it makes sense