Jump to content
Search Community

ScrollMagic + TweenMax issues on resize

syren 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

Hello! I'm pretty new to Greensock, but a huge fan so far. I'm not sure what I'm doing wrong, but I'm pretty sure its related to TweenMax and not ScrollMagic. But I could be wrong. 

 

There are two sections of the site I'm working on that have tweens where the background image zooms in on scroll. There's also a swipe-like animation on a section. Those animations should go away on mobile, and be replaced with a slick carousel. All of that is working fine. The issue arises when you go back to desktop after mobile. I know this only happens when we are messing with DevTools and testing and not with real users, but it's the kind of thing a client will get hung up on. 

 

Most of the animations work, it's just the two background images that get stuck. Would really appreciate any advice to figure this out. Thanks!

See the Pen GbmmoY by syren (@syren) on CodePen

Link to comment
Share on other sites

There's a bit too much to dig through here with all the ScrollMagic scenes and pins along with resize events. I'm not sure what should be happening, but I'm seeing console errors with ScrollMagic. (Cannot read property 'currentStyle' of null)

 

If you think the problem is GSAP related, please try to provide a more simplified demo so we can more easily assist you. It does not need all your actual assets and functionality. Just enough to show the problem.

 

Thanks. 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Okay, I tried to remove as much as possible. 

 

  • Go to 

    See the Pen GbmmoY by syren (@syren) on CodePen

     (full view) and open devtools.
  • Scroll down the page and check out the behavior. The section with the mountains has an image that kind of zoom/pans up into place, and so does the one with the lights. Then there are some slides that flip in.
  • Now scroll back up to the top, and click on the responsive viewer thing in devtools so you can emulate an iphone (there may be a ScrollMagic issue if you resize instead of jump to the phone size). All of the effects should have disappeared.
  • Then click the responsive button again, and go back to desktop. You should see when you scroll, that the backgrounds don't pan/zoom, but the cards still flip in. 

 

The elements in question are `.brains-brawn .bg` and `.ours .bg`, they should be tweening but they are stuck. 

Link to comment
Share on other sites

What is happening is that on the resize event you are telling the element to scale .from() a particular amount.

 

But, because you already set that scale on load, there's no visible animation. You should be using .fromTo() instead of .from().

 

Quick show:

 

//default

scale: 1

// onLoad trigger

scale: from(1.25) > to(1)

// note that the current scale of the element is now 1.25

// resize event

scale: from(1.25) > to(1.25)

// no visible change when scrolling

 

  • Like 5
  • Thanks 1
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...