Jump to content
Search Community

.from Kill, Invalidate Tween on Resize (for Mobile)

ainsley_clark test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all,

 

I know this has been covered to somewhat within the forums but no answer is giving me a solution to my problem.

 

Im using ScrollMagic and TimelineMax (a lot of timelines) to animate boxes when the user scrolls down the page.

My intention is to disable parallax scrolling (the timelines & the scrollmagic controller) when the user resizes below 992 pixels.

 

Upon visiting here: https://github.com/janpaepke/ScrollMagic/issues/15

I was successfully able to disable the parallax, but all my Timelines mostly use .from and upon resize, they preserve the the .from position.

 

What is 'convention' to destroy the timelines and set back to regular position (not .from position) when resizing?

 

I always seem to struggle with this in GSAP!

 

var controller = null;
    
//set initial values for page width and item height
var width = $(window).width()

//767 is my mobile breakpoint
if( width > 992) {
    initScrollMagic();

}

$(window).resize(function(){
    //reset values when page size changes
    //my scroll magic is used on multiple pages, duration depends on item heights
    width = $(window).width()
    
    if( width < 992 ) {
        //you can just use 'controller' here as it will return true or false, you dont need all the conditionals
        if (controller) {
            controller = controller.destroy(true);
            box2Tween.kill();  //This is where Im having problems
            box2Tween.invalidate();
            //TweenMax.killAll();
        }
    } else if ( width > 992 ) {
        //same here 
        if ( !controller ) {
            initScrollMagic()
        }
    }
})

function initScrollMagic(){
    $('body').scrollTop( 0 );
    controller = new ScrollMagic.Controller();

    
     //Box 1 Animate Down
 let box2Tween = new TimelineMax({paused:true});
 box2Tween
 .from(".box--number2", 1.5, {top: -75, ease:Power3.easeInOut})
 .to(".box--number3 .box__shadow", 1.5, {scaleX: 0.8, ease:Power3.easeInOut}, "-=1.5")
 .to(".box--number2 .box__shadow", 1.5, {scaleY: 0, ease:Power3.easeInOut}, "-=1.5");
var scene1 = new ScrollMagic.Scene({
     triggerElement: "#box2__animation",
     offset: -250,
     duration: $(window).height()
 })
 .setTween(box2Tween.play()) 
 // .addIndicators({name: "1 (duration: 0)"}) 
 .addTo(controller);

}

 

Apologies for no codepen, I usually would but its quite complex.

 

Many thanks in advance.

Link to comment
Share on other sites

I know you said your project is complex, but you can always provide a simplified version of your problem in a CodePen. It doesn't have to be the full version of your project. That being said, you're basically looking to destroy the controller and clear the timeline on mobile, right?

 

I would just listen for the resize event and if you're switching from desktop to mobile you can clear the timeline, clearProps of the targets and destroy the controller. Switching from mobile to desktop would fire the function to create the ScrollMagic controller and rebuild the tweens. Maybe something like this:

 

See the Pen xBdBrz by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

 

  • Like 2
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
  • Recently Browsing   0 members

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