Jump to content
Search Community

Media Queries / GSAP / scrollMagic

mrTowers 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

const tween = new TimelineMax();
/*=======================
Animations
=======================*/
tween.add(
   TweenMax.to ('#mobileLogo', 1,{
       opacity:0,
       ease:Power1.easeInOut,
   })
);
tween.add(
   TweenMax.from ('#containerB, .containerC', 0.5,{
       opacity:.5,
   })
);
const controller = new ScrollMagic.Controller();
/*=======================
Scenes
=======================*/
const scene = new ScrollMagic.Scene({
   triggerElement: '#containerB',
   duration: 395,
   triggerHook: 0.78
})
/*=======================
Add to scene
=======================*/
.setTween(tween) //Applies tween animation to Scroll action
//.addIndicators() // Display indicators for triggers
.addTo(controller);

Hello! I'm new to GSAP and web animation, so far I'm really enjoying using this products and every time I find myself just pushing for the next question until I get really stuck.

 

I'm trying to disable the animation applied to "mobileLogo" when the media query is over 400. I'm not sure how to do this using GSAP. I would like to get some ideas in how to approach this. 

 

Thanks in advance.

Link to comment
Share on other sites

Hi and welcome to the forum.

 

Just FYI — ScrollMagic is not a GreenSock product, but we do get a few questions about it. That being said, here are a couple demos from other threads which should be helpful.

 

You can disable the scene for certain window sizes. Here's that approach.

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

 

You could also create/destroy the controller and clearProps depending on screen size. Here's that approach.

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

 

Happy tweening.

:)

 

 

  • Like 3
Link to comment
Share on other sites

Hi Craig, thank you for your response. Seems like you're a legend around here, I feel honored ;)

 

I tried replicating your codePen to fit my needs and seems like I'm not getting anywhere. I think I included all the GSAP bundles but still not even getting the Indicators to show up. 

 

here's an example:

See the Pen Ymojzw by curvedFrame (@curvedFrame) on CodePen

 

 

  • Like 1
Link to comment
Share on other sites

Just a couple typos.

 

//line 4 switch this
tween.to('#box', 1{pacity:0});
// to this
tween.to('#box', 1, {opacity:0});

// line 8 switch this
const scene = new ScrollMagic.scene({
//to this
const scene = new ScrollMagic.Scene({

You'll also need to load jQuery since we're using that for the resize listener.

 

If you load that script and make those changes, you'll be good to go. Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

So, if I wanted to make another element animate similar to the one done previously do I have to make a separate JS file? I'm trying this but is not working. 

 

I'm having issues understanding how to attach multiple tweens to the same triggerElement.

 

console.clear();
const tween = new TimelineMax();
const tween2 = new TimelineMax();

/*=======================
Animations
=======================*/
tween.add(
    TweenMax.to ('#mobileLogo', 1,{
        opacity:0,
        ease:Power1.easeInOut,
    })
);
tween.add(
    TweenMax.from ('#containerB, .containerC', 0.5,{
        opacity:.5,
    })
);

tween2.add(
    TweenMax.to ('.pictureSpacer', 0.25,{
        opacity:1,
    })
)


const controller = new ScrollMagic.Controller();
const controller2 = new ScrollMagic.Controller();
/*=======================
Scenes
=======================*/

const scene = new ScrollMagic.Scene({
    triggerElement: '#hook',
    duration: 395,
    triggerHook: 0.9
})

const scene2 = new ScrollMagic.Scene({
    triggerElement: 'hook',
    duration: 395,
    triggerHook: 0.9
})
/*=======================
Add to scene
=======================*/
.setTween(tween) //Applies tween animation to Scroll action
//.addIndicators() // Display indicators for triggers
.addTo(controller)
.setTween(tween2)
.addTo(controller2);


function sizeAll() {
    var w = window.innerWidth;
  
  if ( w < 450) {
    scene.enabled(true);
    scene2.enabled(true);
  } else {
    scene.enabled(false);
    scene.enabled(false);
    }

}
$(window).resize(sizeAll);
sizeAll();

Any tips?

 

Thanks in advance

Link to comment
Share on other sites

3 hours ago, mrTowers said:

So, if I wanted to make another element animate similar to the one done previously do I have to make a separate JS file?

 

Why would you need to make another file? The only reason to ever create another file is for organization of your code.

 

Make sure you proofread the file you're already working on. 'hook' can't be right. That's looking for a <hook></hook> element. Did you mean '#hook'?

 

const scene2 = new ScrollMagic.Scene({
    triggerElement: 'hook',
    duration: 395,
    triggerHook: 0.9
})

 

 

  • Like 3
Link to comment
Share on other sites

Loops are your friends when you need to make several ScrollMagic scenes. I recently wrote a post about GSAP and ScrollMagic.

Check out demo #4 and #7 as they show how to create multiple scenes with a jQuery loop. You can of course use a vanilla JS loop too. Hopefully that helps. Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

On 8/14/2019 at 2:46 AM, OSUblake said:

 

Why would you need to make another file? The only reason to ever create another file is for organization of your code.

 

Make sure you proofread the file you're already working on. 'hook' can't be right. That's looking for a <hook></hook> element. Did you mean '#hook'?

 


const scene2 = new ScrollMagic.Scene({
    triggerElement: 'hook',
    duration: 395,
    triggerHook: 0.9
})

 

 

Hi! Sorry for the super late reply. Well I totally missed that "#" but even when I added that and fixed another typo in my "sizeAll" function still don't work. 

 

The reason I asked is because I'm adding a new scene and I'm not sure if the way I'm assigning it to the new controller is the right way. I guess I'm just confused since I'm sharing the same "#hook". I feel like there's a cleaner way to achieve what I'm after, feels messy and overworked.

 

Thanks!

Link to comment
Share on other sites

On 8/14/2019 at 9:17 AM, PointC said:

Loops are your friends when you need to make several ScrollMagic scenes. I recently wrote a post about GSAP and ScrollMagic.

Check out demo #4 and #7 as they show how to create multiple scenes with a jQuery loop. You can of course use a vanilla JS loop too. Hopefully that helps. Happy tweening.

:)

 

let me go check it out now, I'll get back to you if I have any questions.

 

Thank you

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