Jump to content
Search Community

Scroll animation on one scroll

Rohit Pathak test

By Rohit Pathak
in GSAP

Moderator Tag
 Share

Recommended Posts

Rohit Pathak test

Rohit Pathak

Posted
Posted (edited)

Hello, I'm new to GSAP and I'm trying some handy animation. Here  is what I'm trying to achieve https://genevoism.com/. I know they have used different approach but I belief such animation are possible in GSAP too. I using combination of ScrollTrigger, ScrollTo, Observer and using timeline pause and play method to achieve one scroll animation effect. By one scroll I mean that each of animation would be trigger per scroll.

 

Approach I took :

> Firstly I have made different timeline for different animation per section. 
> Than I tried to get user scroll using observer's onUp and onDown methods.
> Than after per scroll I play my desired timeline and as one of the tween of that timeline gets completed I pause my timeline, further when user will scroll again timeline play's and pause's again.
> When all tweens in one timeline gets completed, I switch to other timeline by pausing the first one.

> I have also used a forEach loop on scroollTrigger.create so that I can pin the particular section as animation are being performed.

What I want:
I want set of animation such that when my section comes in viewport or is already present in viewport( like hero or banner ) the animation should get started as the user scroll. Each and every animation or tween should start and end between two scroll of user. And as all the animation in a section get's completed it should slide up or down as per user's scroll 100% or 100vh.

Please have a look into the below pen and guide me where I'm going wrong.

Thank you...


<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

 

See the Pen dyLQYvb by yetnagtr-the-bold (@yetnagtr-the-bold) on CodePen

Edited by Rohit Pathak
Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi @Rohit Pathak and welcome to the GSAP Forums!

 

Mixing ScrollTrigger with Observer is a bit more complicated than just use the Observer Plugin. If I was you I'd try to solve everything just with the Observer Plugin alone (like the website you linked).

 

I think most of your problems could stem from this: 

onUp: () => {
  if (timeLine1.totalProgress() < 1) {
    timeLine1.play();
    console.log(timeLine1.totalProgress());
  } else if (timeLine1.totalProgress() == 1 && timeLine2.totalProgress() < 1) {
    timeLine2.play();
    console.log(timeLine2.totalProgress());
  } else if (timeLine2.totalProgress() == 1 && timeLine3.totalProgress() < 1) {
    timeLine3.play();
    console.log(timeLine3.totalProgress());
  }
},

Now I wouldn't use that approach at all. What I would do is to track the amount of steps each timeline has and if the amount of taken steps of a particular section are completed (4 out of 4, if a section requires 4 wheel events to complete a timeline for example) just move onto the next section. I would approach this as a user controlled content slider where each slide has some specific internal animations that should complete (in any direction) before going to the next/previous slide (if any of course). Also instead of checking for progress I would just use a simple boolean that should be toggled to true when the user scrolls and toggle it back to false after that particular section is completed, in order to use that as something that prevents the user from keep scrolling and perhaps triggering the animations of other sections.

 

Right now I don't have the time to dig into this and create a minimal demo for you that illustrates the approach I described above, but hopefully this gives you an approximate idea of what I think should be the best course of action for something like this.

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites
Rohit Pathak test

Rohit Pathak

Posted
  • Author
Posted

Hello @Rodrigo 
I followed your advice and just used Observer for my problem and guess what, I got a better output than earlier but still didn't get what you were trying to explain about using booleans. Than too please check the my codepen code if there is possibility that it can be improved upto GSAP standards, than please let me know.

 

Secondly,

I have added a section for horizontal scrolling as the page's last section. And this horizontal section seems to create a jerk on sliding. I don't know why that same jerk is not visible in codepen but it's there in my project. Even though they both share the same code base. I'm attaching a video link for that VodaMedia Demo – VodaMedia - Google Chrome 2024-04-22 16-41-54 (jumpshare.com).

 

This is my updated codepen. 

See the Pen VwNqmdB by yetnagtr-the-bold (@yetnagtr-the-bold) on CodePen

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi,

 

Sorry to hear about the issues but unfortunately if we can't see it on the demo there is not a lot we can do. That also means that there is something else in your setup that could be interfering with this.

 

A lot of performance problems are down to how browsers and graphics rendering work. It's very difficult to troubleshoot blind and performance is a DEEP topic, but here are some tips: 

  1. Try setting will-change: transform on the CSS of your moving elements. 
  2. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. 
  3. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render.
  4. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance. 
  5. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow)
  6. Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can.
  7. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story. 
  8. data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly.
  9. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any). 
  10. Check if you have any CSS transitions to any of the elements you're animating with GSAP.

Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" :)

I hope this helps!

  • Like 1
Link to comment
Share on other sites
  • 3 weeks later...
Rohit Pathak test

Rohit Pathak

Posted
  • Author
Posted

Hello, @Rodrigo

 

I have made this animation but I'm getting issue with laptop trackpad. Issue is that instead of make one tween in play it let two or more tween to play. Even large scroll on touchpad makes more than 3 tween play at once.
This is my live URL and this is my GSAP code.
https://blackwolftechnologies.co.za/test/vodamedia
 

const gsapInitialization = () => {

    console.log("gsapInitialization is done...")
    gsap.registerPlugin(ScrollTrigger);
 
 
    gsap.config({
        easeInOutCubic: function (progress) {
            return progress < 0.5 ? 4 * progress ** 3 : 1 - Math.pow(-2 * progress + 2, 3) / 2;
        }
    });
 
  
    let sectionEase = "easeInOutCubic";
    let slideEase = "power3.easeinOut";
    let otherAnimationEase = "easeInOutCubic";
 
    let sectionDuration = 0.7;
    let slideDuration = 0.6;
 
 
    gsap.registerPlugin(ScrollTrigger);
    gsap.registerPlugin(ScrollToPlugin);
    gsap.registerPlugin(Observer);
 
    let mastertl = gsap.timeline({
        paused: true,
        defaults: {
            ease: otherAnimationEase,
            duration: 0.3,
            autoAlpha: 0,
        },
    });
 
    gsap.set('.graph_slide_heading', {
        width: window.innerWidth >= 767 ? 550 : 240,
        y: 100,
        autoAlpha: 0,
    })
 
    mastertl
        .from('.banner_description', {
            y: 100,
        }).addPause()
        .to(window, { scrollTo: { y: '.horizontal_scroller_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.hs_container_1_text', {
            xPercent: -100,
        }).addPause()
        .to('.hs_inner', {
            xPercent: -50,
            autoAlpha: 1,
            ease: slideEase,
            delay:0.5,
        }).addPause()
        .to(window, { scrollTo: { y: '.one_col_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.one_col_text', {
            y: 100,
        }).addPause()
        .to(window, { scrollTo: { y: '.two_col_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.tc_telco_content', {
            y: 200,
            autoAlpha: 0,
        })
        .from('.tc_telco_image', {
            y: 100,
            autoAlpha: 0,
        }, "<").addPause()
        .to('.tc_telco_content', {
            y: -100,
            height: 0,
            autoAlpha: 0,
        })
        .from('.tc_digital_content', {
            y: 100,
            height: 0,
            autoAlpha: 0,
        }, "<")
        .to('.tc_telco_image_container', { autoAlpha: 1, scrollTo: { y: '.tc_telco_image_in_2', autoKill: false, ease: sectionEase, } }, "<")
        .addPause()
        .to(window, { scrollTo: { y: '.two_col_module_V2', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.tcV2_main_slide_heading ', {
            y: 100,
        }).addPause()
        .to('.two_col_module_V2_inner', {
            xPercent: window.innerWidth >= 767 ? -60 : -100,
            autoAlpha: 1,
            ease: slideEase,
            duration: slideDuration,
        }).addPause()
        .to(window, { scrollTo: { y: '.two_col_logo_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.two_col_logo_heading, .two_col_logo_description', {
            y: 100,
        })
        .from('.two_col_logo_module .two_col_logo_image', {
            y: 100,
        }).addPause()
        .to(window, { scrollTo: { y: '.graph_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .to('.graph_slide_heading', {
            y: 0,
            autoAlpha: 1,
        }).addPause()
        .to('.graph_slide_heading', {
            width: window.innerWidth >= 1024 ? 350 : (window.innerWidth >= 767 ? 240 : "100%"),
            autoAlpha: 1,
            ease: sectionEase,
        })
        .from(' .graph_module_image', {
            x: 100,
        }, "<").addPause()
        .to(window, { scrollTo: { y: '.logo_slider_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.logo_slider_heading , .logo_slider_description', {
            y: 100,
        })
        .from(' .logo_slider_module .two_col_logo_container', {
            y: 100,
        })
        .addPause()
        .to(window, { scrollTo: { y: '.one_col_module_V2_r', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.one_col_module_V2_r .one_col_V2_heading', {
            y: 100,
        }).addPause()
        .to(window, { scrollTo: { y: '.contact_us_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.contact_us_heading, .contact_us_description, .contact_us_form_container', {
            y: 100,
        }).addPause()
 
    // Observer For Timeline
    Observer.create({
        type: "wheel, touch, pointer, touchmove",
        preventDefault: true,
        wheelSpeed: -1,
        tolerance: 100,
        dragMinimum: window.innerWidth >= 480 ? 100 : 20,
        onUp: () => {
            if (!mastertl.isActive() && mastertl.totalProgress() < 1) {
                mastertl.play();
            }
        },
        onDown: () => {
            if (!mastertl.isActive() && mastertl.totalProgress() <= 1) {
                mastertl.reverse();
            }
        },
 
    });
 
    // Animation on Arrow Key
    document.onkeydown = CheckKeyFun;
    function CheckKeyFun(key) {
        key.preventDefault();
        if (key.keyCode == '38') {
            // console.log("Up arrow");
            if (!mastertl.isActive() && mastertl.totalProgress() <= 1) {
                mastertl.reverse();
            }
        } else if (key.keyCode == '40') {
            // console.log("Down arrow");
            if (!mastertl.isActive() && mastertl.totalProgress() < 1) {
                mastertl.play();
            }
        }
    }
 
    // Nav Menu Link To Sections
    let hamIcon = document.querySelector('#headerModule .hamIcon');
    hamIcon.onclick = linkListenerToNav;
 
    function linkListenerToNav() {
        let navTimeout = setTimeout(function () {
            // Menu Navbar
            let whatSetUsApartNav = document.querySelector('#menu-1-749d960 .whatSetUsApartMenu .elementor-item-anchor');
            let whatDoWeDoNav = document.querySelector('#menu-1-749d960 .whatDoWeDoMenu .elementor-item-anchor ');
            let whatDoWeOfferNav = document.querySelector('#menu-1-749d960 .whatDoWeOfferMenu .elementor-item-anchor');
            let ourClientsNav = document.querySelector('#menu-1-749d960 .ourClientsMenu .elementor-item-anchor');
            let socialImpactNav = document.querySelector('#menu-1-749d960 .socialImpactMenu .elementor-item-anchor');
            let contactUsNav = document.querySelector('#menu-1-749d960 .contactUsMenu .elementor-item-anchor');
 
            const navMenu = [whatSetUsApartNav, whatDoWeDoNav, whatDoWeOfferNav, ourClientsNav, socialImpactNav, contactUsNav];
            navMenu.forEach((menuItem) => {
                menuItem.addEventListener('click', function (e) {
                    e.preventDefault();
                    if (menuItem.parentElement.classList.contains("whatSetUsApartMenu")) {
                        // console.log("whatSetUsApart");
                        mastertl.progress(0.038).play();
                    } else if (menuItem.parentElement.classList.contains("whatDoWeDoMenu")) {
                        // console.log("whatDoWeDoMenu");
                        mastertl.progress(0.149).play();
                    } else if (menuItem.parentElement.classList.contains("whatDoWeOfferMenu")) {
                        // console.log("whatDoWeOfferMenu");
                        mastertl.progress(0.334).play();
                    } else if (menuItem.parentElement.classList.contains("ourClientsMenu")) {
                        // console.log("ourClientsMenu");
                        mastertl.progress(0.752).play();
                    } else if (menuItem.parentElement.classList.contains("socialImpactMenu")) {
                        // console.log("socialImpactMenu");
                        mastertl.progress(0.856).play();
                    } else if (menuItem.parentElement.classList.contains("contactUsMenu")) {
                        // console.log("contactUsMenu");
                        mastertl.progress(0.93196).play();
                    }
                })
            })
        }, 100)
    }
 
}





 
window.addEventListener('load', gsapInitialization)
 
// Scroll To Top Function
function smoothScrollToTop() {
    // console.log('smoothscroll');    
    const rootElement = document.documentElement;
    rootElement.scrollTo({
        top: 0,
        behavior: "smooth"
    });
}
smoothScrollToTop();
window.addEventListener("load", smoothScrollToTop);
window.addEventListener("beforeunload", smoothScrollToTop);
document.addEventListener("load", smoothScrollToTop);


 

 

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi,

 

I believe the issue here is that the trackpad keeps dispatching a wheel event even after the user's interaction with the trackpad has ended. This is not a GSAP related issue, but the way trackpads (and apple magic mouse I believe) works. What you can do is create a safeguard, like a boolean that gets toggled when the wheel event is fired and then toggled back when the animation has completed. Something like this:

See the Pen NWVKVwx by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites
Rohit Pathak test

Rohit Pathak

Posted
  • Author
Posted

Hey @Rodrigo,
This approach is not working for me, is there any other way to stop touchpad too many scroll events? 
Or is there something wrong with my code.
 

 

const gsapInitialization = () => {

    console.log("gsapInitialization is done...")
    gsap.registerPlugin(ScrollTrigger);


    gsap.config({
        easeInOutCubic: function (progress) {
            return progress < 0.5 ? 4 * progress ** 3 : 1 - Math.pow(-2 * progress + 2, 3) / 2;
        }
    });


    // let sectionEase = "Power1.easeInOut";
    let sectionEase = "easeInOutCubic";
    // let slideEase = "Power1.easeInOut";
    let slideEase = "power3.easeinOut";
    let otherAnimationEase = "easeInOutCubic";

    let sectionDuration = 0.7;
    let slideDuration = 0.6;

    // VodaMedia Development Page Specific GSAP Animation
    gsap.registerPlugin(ScrollTrigger);
    gsap.registerPlugin(ScrollToPlugin);
    gsap.registerPlugin(Observer);

    let mastertl = gsap.timeline({
        paused: true,
        defaults: {
            // ease: "power3.inOut",
            // ease: "Power1.easeInOut",
            ease: otherAnimationEase,
            duration: 0.3,
            autoAlpha: 0,
        },
    });

    gsap.set('.graph_slide_heading', {
        width: window.innerWidth >= 767 ? 550 : 240,
        y: 100,
        autoAlpha: 0,
    })

    mastertl
        .from('.banner_description', {
            y: 100,
            // onComplete: () => (isTweening = false),
        })
         .addPause()
        .to(window, { scrollTo: { y: '.horizontal_scroller_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.hs_container_1_text', {
            xPercent: -100,
            // onComplete: () => (isTweening = false),
        })
         .addPause()
        .to('.hs_inner', {
            xPercent: -50,
            autoAlpha: 1,
            ease: slideEase,
            delay:0.5,
            // onComplete: () => (isTweening = false),
        })
         .addPause()
        .to(window, { scrollTo: { y: '.one_col_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.one_col_text', {
            y: 100,
            // onComplete: () => (isTweening = false),
        })
         .addPause()
        .to(window, { scrollTo: { y: '.two_col_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.tc_telco_content', {
            y: 200,
            autoAlpha: 0,
            // onComplete: () => (isTweening = false),
        })
        .from('.tc_telco_image', {
            y: 100,
            autoAlpha: 0,
            // onComplete: () => (isTweening = false),
        }, "<")
         .addPause()
        .to('.tc_telco_content', {
            y: -100,
            height: 0,
            autoAlpha: 0,
            // onComplete: () => (isTweening = false),
        })
        .from('.tc_digital_content', {
            y: 100,
            height: 0,
            autoAlpha: 0,
            // onComplete: () => (isTweening = false),
        }, "<")
        .to('.tc_telco_image_container', { autoAlpha: 1, scrollTo: { y: '.tc_telco_image_in_2', autoKill: false, ease: sectionEase, } }, "<")
         .addPause()
        .to(window, { scrollTo: { y: '.two_col_module_V2', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.tcV2_main_slide_heading ', {
            y: 100,
            // onComplete: () => (isTweening = false),
        })
         .addPause()
        .to('.two_col_module_V2_inner', {
            xPercent: window.innerWidth >= 767 ? -60 : -100,
            autoAlpha: 1,
            ease: slideEase,
            duration: slideDuration,
            // onComplete: () => (isTweening = false),
        })
         .addPause()
        .to(window, { scrollTo: { y: '.two_col_logo_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.two_col_logo_heading, .two_col_logo_description', {
            y: 100,
            // onComplete: () => (isTweening = false),
        })
        .from('.two_col_logo_module .two_col_logo_image', {
            y: 100,
            // onComplete: () => (isTweening = false),
        })
         .addPause()
        .to(window, { scrollTo: { y: '.graph_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        // .from('.graph_module_heading', {
        //     y: 100,
        // }).addPause()
        // .to('.graph_module_inner', {
        //     xPercent: -100,
        //     autoAlpha: 1,
        //     ease:slideEase,
        //     duration:slideDuration,
        // })
        // .from('.graph_slide_heading, .graph_module_image', {
        //     y: 100,
        //     stagger: 0.8,
        // })
        .to('.graph_slide_heading', {
            y: 0,
            autoAlpha: 1,
            // onComplete: () => (isTweening = false),
        })
         .addPause()
        .to('.graph_slide_heading', {
            width: window.innerWidth >= 1024 ? 350 : (window.innerWidth >= 767 ? 240 : "100%"),
            autoAlpha: 1,
            ease: sectionEase,
            // onComplete: () => (isTweening = false),
        })
        .from(' .graph_module_image', {
            x: 100,
            // onComplete: () => (isTweening = false),
        }, "<")
         .addPause()
        .to(window, { scrollTo: { y: '.logo_slider_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.logo_slider_heading , .logo_slider_description', {
            y: 100,
            // onComplete: () => (isTweening = false),
        })
        .from(' .logo_slider_module .two_col_logo_container', {
            y: 100,
            // onComplete: () => (isTweening = false),
        })
         .addPause()
        .to(window, { scrollTo: { y: '.one_col_module_V2_r', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.one_col_module_V2_r .one_col_V2_heading', {
            y: 100,
            // onComplete: () => (isTweening = false),
        })
         .addPause()
        .to(window, { scrollTo: { y: '.contact_us_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.contact_us_heading, .contact_us_description, .contact_us_form_container', {
            y: 100,
            // onComplete: () => (isTweening = false),
        })
         .addPause()


    // let isTweening = false;
    //     console.log(isTweening);

    // Observer For Timeline
    Observer.create({
        type: "wheel, touch, pointer, touchmove",
        target: window,
        preventDefault: true,
        wheelSpeed: -1,
        tolerance: 100,
        dragMinimum: window.innerWidth >= 480 ? 100 : 20,
        onUp: () => {
            // if (isTweening) return;
            // isTweening = true;
            // console.log(isTweening);
            if (mastertl.totalProgress() < 1) {
                mastertl.play();
            }
        },
        onDown: () => {
            // if (isTweening) return;
            // isTweening = true;  
            // console.log(isTweening);
            if (mastertl.totalProgress() <= 1) {
                mastertl.reverse();
            }
        },

    });


    // Animation on Arrow Key
    document.onkeydown = CheckKeyFun;
    function CheckKeyFun(key) {
        key.preventDefault();
        if (key.keyCode == '38') {
            // console.log("Up arrow");
            if (mastertl.totalProgress() <= 1) {
                mastertl.reverse();
            }
        } else if (key.keyCode == '40') {
            // console.log("Down arrow");
            if (mastertl.totalProgress() < 1) {
                mastertl.play();
            }
        }
    }


    // Nav Menu Link To Sections 
    let hamIcon = document.querySelector('#headerModule .hamIcon');
    hamIcon.onclick = linkListenerToNav;

    function linkListenerToNav() {
        let navTimeout = setTimeout(function () {
            // Menu Navbar
            let whatSetUsApartNav = document.querySelector('#menu-1-749d960 .whatSetUsApartMenu .elementor-item-anchor');
            let whatDoWeDoNav = document.querySelector('#menu-1-749d960 .whatDoWeDoMenu .elementor-item-anchor ');
            let whatDoWeOfferNav = document.querySelector('#menu-1-749d960 .whatDoWeOfferMenu .elementor-item-anchor');
            let ourClientsNav = document.querySelector('#menu-1-749d960 .ourClientsMenu .elementor-item-anchor');
            let socialImpactNav = document.querySelector('#menu-1-749d960 .socialImpactMenu .elementor-item-anchor');
            let contactUsNav = document.querySelector('#menu-1-749d960 .contactUsMenu .elementor-item-anchor');

            const navMenu = [whatSetUsApartNav, whatDoWeDoNav, whatDoWeOfferNav, ourClientsNav, socialImpactNav, contactUsNav];
            navMenu.forEach((menuItem) => {
                menuItem.addEventListener('click', function (e) {
                    e.preventDefault();
                    if (menuItem.parentElement.classList.contains("whatSetUsApartMenu")) {
                        // console.log("whatSetUsApart");
                        mastertl.progress(0.038).play();
                    } else if (menuItem.parentElement.classList.contains("whatDoWeDoMenu")) {
                        // console.log("whatDoWeDoMenu");
                        mastertl.progress(0.19).play();
                    } else if (menuItem.parentElement.classList.contains("whatDoWeOfferMenu")) {
                        // console.log("whatDoWeOfferMenu");
                        mastertl.progress(0.39).play();
                    } else if (menuItem.parentElement.classList.contains("ourClientsMenu")) {
                        // console.log("ourClientsMenu");
                        mastertl.progress(0.752).play();
                    } else if (menuItem.parentElement.classList.contains("socialImpactMenu")) {
                        // console.log("socialImpactMenu");
                        mastertl.progress(0.856).play();
                    } else if (menuItem.parentElement.classList.contains("contactUsMenu")) {
                        // console.log("contactUsMenu");
                        mastertl.progress(0.93196).play();
                    }
                })
            })
        }, 100)
    }


}


window.addEventListener('load', gsapInitialization)


// Scroll To Top Function
function smoothScrollToTop() {
    // console.log('smoothscroll');     
    const rootElement = document.documentElement;
    rootElement.scrollTo({
        top: 0,
        behavior: "smooth"
    });
}
smoothScrollToTop();
window.addEventListener("load", smoothScrollToTop);
window.addEventListener("beforeunload", smoothScrollToTop);
document.addEventListener("load", smoothScrollToTop);


 

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Sorry about the issues but without a minimal demo that clearly illustrates the problem there is not a lot we can do. The only thing I can see in your code is that you have the isTweening boolean commented out in your onUp and onDown callbacks, so that will definitely won't work: 

// let isTweening = false;
//     console.log(isTweening);

// Observer For Timeline
Observer.create({
  type: "wheel, touch, pointer, touchmove",
  target: window,
  preventDefault: true,
  wheelSpeed: -1,
  tolerance: 100,
  dragMinimum: window.innerWidth >= 480 ? 100 : 20,
  onUp: () => {
    // if (isTweening) return;
    // isTweening = true;
    // console.log(isTweening);
    if (mastertl.totalProgress() < 1) {
      mastertl.play();
    }
  },
  onDown: () => {
    // if (isTweening) return;
    // isTweening = true;  
    // console.log(isTweening);
    if (mastertl.totalProgress() <= 1) {
      mastertl.reverse();
    }
  },

});

 

Sorry I can't be of more assistance.

Happy Tweening!

Link to comment
Share on other sites
Rohit Pathak test

Rohit Pathak

Posted
  • Author
Posted

Hello @Rodrigo, I have able to solve above issue, thanks to your help.
But after completing my animation and testing it across various device I found that it doesn't work on apple touch devices( Iphone & Ipad ).

I can not provide a codepen demo because, all styling and html elements are coming from CMS hence it's  a massive CSS file. I'm mentioning the  required JS code. And if you want to view my whole code, than 

  1. Open page source of this URL : https://blackwolftechnologies.co.za/test/vodamedia/
  2. Search for "main.js" file in browser.
  3. Boom it's my code.

I know it's a messy one. I'm using 4 version of code as wrapped inside 4 function. First two version are for this URL and other two version of other page.
You need to check for "gsapInitializationMob" function that's the code responsible for mobile devices hence responsible for iPhone and iPad. Still I'm mentioning same code snippet here. Please let me know what's wrong here. 

const gsapInitializationMob = () => {

    console.log("gsapInitializationMob is done...")

    // Initalizing custom easing function to match smoothing with Fullpage JS
    gsap.config({
        easeInOutCubic: function (progress) {
            return progress < 0.5 ? 4 * progress ** 3 : 1 - Math.pow(-2 * progress + 2, 3) / 2;
        }
    });


    let sectionEase = "easeInOutCubic";
    let slideEase = "power3.easeinOut";
    let otherAnimationEase = "easeInOutCubic";

    let sectionDuration = 0.7;
    let slideDuration = 0.6;

    let animInprogress = false;
    let animTimeStamp, animTimeStamp2;

    // VodaMedia Development Page Specific GSAP Animation
    gsap.registerPlugin(ScrollTrigger);
    gsap.registerPlugin(ScrollToPlugin);
    gsap.registerPlugin(Observer);

    let mastertl = gsap.timeline({
        paused: true,
        defaults: {
            ease: otherAnimationEase,
            duration: 0.3,
            autoAlpha: 0,
			onComplete : () => {
				console.log("tween complete");
			},
			onReverseComplete : () => {
				console.log("tween complete");
			},
			
        },
    });

    mastertl
        .from('.banner_description', {
            y: 100,
        })
        .addPause()
        .to(window, { scrollTo: { y: '.horizontal_scroller_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.hs_container_1_text', {
            xPercent: -100,            
        })
        .addPause()
        .to(window, { scrollTo: { y: '.horizontal_scroller_module .hs_container_2', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .addPause()
        .to(window, { scrollTo: { y: '.one_col_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.one_col_text', {
            y: 100,
        })
        .addPause()
        .to(window, { scrollTo: { y: '.two_col_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.tc_telco_content', {
            y: 200,
            autoAlpha: 0,
        })
        .from('.tc_telco_image', {
            y: 100,
            autoAlpha: 0,
        }, "<")
        .addPause()
        .to('.tc_telco_content', {
            y: -100,
            height: 0,
            autoAlpha: 0,
        })
        .from('.tc_digital_content', {
            y: 100,
            height: 0,
            autoAlpha: 0,
        }, "<")
        .to('.tc_telco_image_container', { autoAlpha: 1, scrollTo: { y: '.tc_telco_image_in_2', autoKill: false, ease: sectionEase, } }, "<")
        .addPause()
        .to(window, { scrollTo: { y: '.two_col_module_V2', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.tcV2_main_slide_heading ', {
            y: 100,
        })
        .addPause()
        .to('.tcV2_main_slide_heading ', {
            autoAlpha:0,
        })
        .to('.tcV2_main_slide, .tcV2_second_slide',{
            minHeight:'50vh',      
            autoAlpha:1,      
        },"<")
        .addPause()
        .to(window, { scrollTo: { y: '.two_col_logo_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.two_col_logo_module .two_col_logo_heading, .two_col_logo_module .two_col_logo_description', {
            y: 100,
        })
        .addPause()
        .to('.two_col_logo_module .two_col_logo_content, .two_col_logo_module .two_col_logo_container',{
            minHeight:"50vh",
            autoAlpha:1,
        })
        .from('.two_col_logo_module .two_col_logo_image', {
            y: 100,
        }, "<")
        .addPause()
        .to(window, { scrollTo: { y: '.graph_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.graph_slide_heading_inner_1', {
            y: 100,
        })
        .addPause()
        .to('.graph_slide_heading_inner_1', {
            autoAlpha:0,
            height:0,
            width:0,
        })
        .from('.graph_slide_heading_inner_2', {
            y:0,
        },"<")
        .from(' .graph_module_image', {
            y: 100,
        }, "<")
        .addPause()
        .to(window, { scrollTo: { y: '.logo_slider_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.logo_slider_heading , .logo_slider_description', {
            y: 100,
        })
        .from(' .logo_slider_module .two_col_logo_container', {
            y: 100,
        })
        .addPause()
        .to(window, { scrollTo: { y: '.one_col_module_V2_r', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.one_col_module_V2_r .one_col_V2_heading', {
            y: 100,
        })
        .addPause()
        .to(window, { scrollTo: { y: '.contact_us_module', autoKill: false }, duration: sectionDuration, ease: sectionEase, })
        .from('.contact_us_heading, .contact_us_description, .contact_us_form_container', {
            y: 100,
        })
        .addPause()

//     Observer For Timeline
    Observer.create({
        type: "wheel, touch, pointer, touchmove",
        target: window,
        preventDefault: true,
        wheelSpeed: -1,
        tolerance: 100,
        dragMinimum: window.innerWidth >= 480 ? 100 : 20,
        onUp: () => {
				console.log("up");
            if (mastertl.totalProgress() < 1) {
                mastertl.play();
			
				
            }
        },
        onDown: () => { 
			console.log("down");
            if (mastertl.totalProgress() <= 1) {
                mastertl.reverse();
				
            }
        },

    });


}

   

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi,

 

Sorry about the issues, but there is nothing we can do to debug a live site, especially one with all the styles yours has.

 

The only thing I can notice on my ipad is that there is scroll, both vertical and horizontal, if you want to use Observer why you have scrolling? That doesn't make a lot of sense. As well as create a mobile specific version of your code, perhaps you could add some specific styles to prevent scrolling and first check that the Observer events are being fired correctly.

 

Unfortunately we don't have the time resources to dive into something like this especially with everything wordpress and elementor are adding to this, there is far too many things, and this is beyond the scope of what we can do in these free forums. We offer paid consulting services and you can post in the Jobs & Freelance forums as well, to get help there.

 

Sorry I can't be of more assitance.

Happy Tweening!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...