[Media Queries / GSAP / scrollMagic]

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

[Media Queries / GSAP / scrollMagic]

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!

[Media Queries / GSAP / scrollMagic]

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

[Media Queries / GSAP / scrollMagic]

It worked. Thank you much sir! 

 

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

 

Cheers

[Media Queries / GSAP / scrollMagic]

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

 

 

[Media Queries / GSAP / scrollMagic]

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.