Duet Colin

Hi @Rodrigo, Thanks again for your reply. I've added your remarks and also changed the code a bit so it behaves a bit more like the exact website. https://codesandbox.io/s/cool-shadow-kkeorm The part you're referring to is the index.js:38 This callback will only execute once the done method is called in the in() method of the transition. I hope you have an idea how to solve this. Thanks!

@Rodrigo thanks for your compliment and your response! I didn't know the existence of codesandbox. Love it! I created a little demo hero > https://codesandbox.io/s/cool-shadow-kkeorm Now you see a difference between 1) hard refreshing the carousel page and looking at the Pinned section and 2) Going from "home" to the "carousel page". The pinned part of the Scrolltrigger section reacts slightly different. by the way: In my local setup I already removed all the swiper/carousel logic and just went with 1 <h1>, the problem was still occured..

I'm having 1 issue with the combination of HighwayJS + Scrolltrigger. I wanted to demonstrate this issue in Codepen, but I can't figure out how to simulate the problem in Codepen, because I need to have a page transition in place and therefore I need 2 pages. Tried to do this with 2 codepen's. But it doesn't seem to work. So I will post the links to this specific project and a screencap to demonstrate the problem. The problem is as follows; On a homepage I have a carousel. Carousel functions with ScrollTrigger. It's pinned once it hits the top of the viewport. This all works fine when you land directly on the homepage. But as soon as you land on the homepage coming from another page within this website it doesn't function properly. The whole carousel disappears when it's Pinned (Fixed). The internal page transitions are without a refresh with the help of HighwayJS The whole problem doesn't occur when I change the pinType to 'transform'. But this pinType has a weird effect to the UX. It's bouncing a bit scrolling through the slides.. Looks fragile. To replicate the issue Start here > https://favelastreet.flywheelsites.com/about-us/ Open nav en click on "Favela Street" to go to the homepage, scroll down, once you see the carousel, it disappears when it hits top of the viewport. Screencap > Remark I kill all Scrolltriggers. I also use this script in order to refresh all Scrolltriggers as well. H.on('NAVIGATE_OUT', ({ from, trigger, location }) => { ScrollTrigger.getAll().forEach(st => st.refresh()) ScrollTrigger.clearScrollMemory( ) ; }); ScrollTrigger part of the Carousel (carousel itself is SwiperJS) this.carouselST = ScrollTrigger.create({ trigger: ".js_container", pin:true, start: "top top", // pinType: 'transform', >> If this line is uncommented the carousel works fine end:'+='+ (window.innerHeight * 2) + 'px', onUpdate: (self) => { const currentSlide = this.swiperImageCarousel.realIndex + 1 if(self.direction === 1) { if ((self.progress * 100) > (percentage * currentSlide)) { this.swiperImageCarousel.slideNext(500, false) $('.js_carouselIndicator').removeClass('-active') $('.js_carouselIndicator' + this.swiperImageCarousel.realIndex).addClass('-active') } } else if(self.direction === -1) { if((self.progress * 100) < (percentage * currentSlide)) { this.swiperImageCarousel.slidePrev(500, false) $('.js_carouselIndicator').removeClass('-active') $('.js_carouselIndicator' + this.swiperImageCarousel.realIndex).addClass('-active') } } } }); Page Transition // File: custom-transition.js // Import Highway import Highway from '@dogstudio/highway' import gsap from 'gsap' import Experience from "../Experience"; class DefaultTransition extends Highway.Transition { // Built-in methods in({ from, to, trigger, done }) { // Get color theme of next page const themeColors = to.dataset.theme const colors = themeColors.split("_") const tlPageTransition = gsap.timeline() // Set new page to current Scroll position tlPageTransition.set(to, {y:window.scrollY}) // Slide in New Page this.experience = new Experience() this.responsive = this.experience.responsive let slideParam = -50; // Slide to the left tlPageTransition.to('#js_wrapper', {duration:2,xPercent:slideParam,ease:"power3.inOut", onComplete: () => { // Set the Wrapper to 0 on the X axis and remove the old page tlPageTransition.set('#js_wrapper', {xPercent:0,onComplete: () => { from.remove() }}) // Position new page back to top and instant scroll back to top tlPageTransition.set(to,{y:0, onComplete:() => { window.scrollTo({ top: 0, behavior: "instant" }) done() } }) }}) // Set new colors tlPageTransition.to('#side',{duration:1, color: colors[0]},'-=1') tlPageTransition.to('.js_openNav',{duration:1, backgroundColor: colors[0]},'-=1') tlPageTransition.to('body',{duration:1, backgroundColor: colors[1]},'-=1') } out({ from, trigger, done }) { done() } } // Don`t forget to export your transition export default DefaultTransition;

@OSUblakeThanks for this great script! I'm busy with a page transitions that's using this script. I have a grid of trains. Clicking on a train will enlarge it (with GSAP FLIP) and while this happens the canvas animation plays. (finally you end up on the detail page of the train) (see screenshots) This is working for 1 instance. I'm trying to refactor your code in order to make it work with multiple instances. My code can be found here > https://stackoverflow.com/questions/68482925/adding-a-timeline-to-a-master-timeline-and-add-a-parameter Do you have an idea what's the most efficient way to enhance your code?