Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mrTowers

Media Queries / GSAP / scrollMagic

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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

It worked. Thank you much sir! 

 

I'll be picking your brain for time to time. 

 

Cheers

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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!

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×