Jump to content
Search Community

Duet Colin

Business

  • Posts

    15

  • Joined

  • Last visited

 Content Type 

Posts posted by Duet Colin

    During page transition I want to scroll to top but ScrollSmoother is prevent window.ScrollTo behaviour instant

    in GSAP

    Posted

    During page transition I want to scroll to top but ScrollSmoother is prevent window.ScrollTo behaviour instant. So the scrolling is always smooth.. I need going instantly to top. 

     

    Any idea if this is desirable behaviour? Because when I disable ScrollSmoother everything works perfectly. 

    Do I need to kill ScrollSmoother or pause it?

     

    When I read the docs, this should always work: 

    // scroll to top
window.scrollTo({
    top: 0,
    behavior: 'instant'
})

    Scrolltrigger & ScrollSmoother - how to avoid position fixed in this scene?

    in GSAP

    Posted

    Beaten By AI

     

    I used this prompt in Chat GPT:

    Below I have listed my code of an animation created with HTML, SCSS and Javascript. I use the Javascript animation library GSAP & Scrolltrigger & ScrollSmoother. Because I use ScrollSmoother I can't use position fixed. So I'm tied to pinning elements only. In my Javascript code I loop through the panels and I create for each panel a Scrolltrigger. The trigger is the top of the .panel element. But because their parent element .panels is moving up the triggers also move and this is not ideal. How can I refactor my code in order to keep the triggers in place?

     

    And it returned code that solved the issue :-) 

     

    See the Pen mdzpxPJ by duetdigital (@duetdigital) on CodePen

     

    Answer of ChatGPT:

    The issue with your ScrollTrigger animation is that you are pinning the .js_cases element, which is a child of .js_panels. As the .js_panels element moves up due to the ScrollSmoother, the trigger for each panel also moves with it. One solution to keep the triggers in place is to add an empty element with a height equal to the .js_panels element before the .js_cases element. Then, you can pin this element instead of the .js_cases element.


    <code>

    Here, we add two empty elements with the class     .empty-panel before and after the .js_cases element. We then pin the first .empty-panel element, which is before the .js_cases element, using the height of the .panels element as the end value. We pin the .js_cases element as before, using 'max' as the end value. By pinning the empty panel, we ensure that the ScrollTrigger stays in place, even as the .panels element moves up.

     

    Scrolltrigger & ScrollSmoother - how to avoid position fixed in this scene?

    in GSAP

    Posted

    Hi @Rodrigo, thank you for comment. 

     

    I was aware of the fact that I can't use positioned fixed in combination with ScrollSmoother. 

    Also tried to work with pinning in stead of adding/removing a class that sets a position fixed to an element.

    The result is far from the same as what you see in my preview on youtube. 

     

    I want to see the panels scroll by, underneath the image container. And each time the panel scroll underneath the image container it should reveal the next image, almost looks like the top of the image is connected to the top of the .panel. 

     

    Any idea how to do this? 

     

    -update-

    I tried another setup:  Thought it worked, but now I have the probably that I pin every .panel inside .panels while moving .panels upwards once it triggers. So this way the trigger starts moving :-( . To emphasize, the top of the image needs to stick to the top of the panel. 

     

    See the Pen rNqpzMB by duetdigital (@duetdigital) on CodePen

    Any idea how to solve this? 

     

     

    Scrolltrigger & ScrollSmoother - how to avoid position fixed in this scene?

    in GSAP

    Posted

    I have a scene where the base principle works how I want it. But, I want to add ScrollSmoother and this will break my setup/output.

     

    See codepen for the code (it doesn't work in codepen, because my actual setup is a bit too complicated to have it up and running in codenpen).

     

    And this is a preview of what the code actually does: 

    Every image should be a different image and eventually the text also should switch, but this is something I will work on later. I was very happy with this part.

     

    This is how it works;

    - There are 2 Scrolltriggers

    - The first one will add a class (is-active) once the scene hits the top of the viewport. This class will add position fixed on the element that contains the images container and the texts container. 

    - While that element is fixed the panels (.panel) will scroll underneath this element. The second scrolltrigger is there to make sure that whenever a .panel hits the image container the second image moves up. 

     

     

     

    But, now I wanted to add ScrollSmoother and this completely breaks this setup due to the position: fixed part. I tried different things to solve this, but I can't wrap my head around it. 

     

    Anyone has an idea how I can refactor my code and use Scrolltrigger in a different way?

     

    Thanks a lot!

    See the Pen wvYPLJe by duetdigital (@duetdigital) on CodePen

    ScrollTrigger and HighwayJS

    in GSAP

    Posted

    @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..

    ScrollTrigger and HighwayJS

    in GSAP

    Posted

    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;

     

    Is it possible to animate spritesheet through GSAP ?

    in GSAP

    Posted · Edited by Duet Colin
    Mentioning

    On 2/23/2017 at 6:41 AM, OSUblake said:

    That's actually what I was referring to in my post above as that is what I use. Money well spent!

     

    A packed sprite sheet uses less memory and can improve performance, especially on mobile devices with limited memory. This is much better than having an ordered sprite sheet where each frame is the same size.

     

    http://i.imgur.com/MBfZqUV.png

     

     

    TexturePacker works with a bunch of different libraries and CSS, or you could manually do it yourself. Here's a demo showing how to use the drawImage canvas method I mentioned above. 

     

     

     

     

     

     

    .

    @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?

     

    Screenshot 2021-07-22 at 16.32.45.png

    Screenshot 2021-07-22 at 16.32.19.png

×
×
  • Create New...