[Scroll to div on mouse scroll up/down]

On 7/31/2019 at 8:37 AM, mikel said:

Hi @fedehache,

 

There are some other sliders here in the thread.
Pick one that works well with your trackpad.

 

Kind regards

Mikel

 

Well...  I found that tweaking the anim duration from .6s to say 2s, the trackpad advances just one panel at a time.  
 

[Scroll to div on mouse scroll up/down]

hi @mikel
I'm looking at the "Vertical Full Screen Slider" demo @ 

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

The mouse wheel scroll and the drag works just fine. But using the trackpad of my notebook, the slider always moves two panels per gesture. Is there a simple way to limit the advance to just one panel at a time?
 

[ScrollTo more than one anchor]

that was fast @mikel. Thank you!

[ScrollTo more than one anchor]

Hi!
I'm trying to get this:
 

$("button").each(function(index, element){
  $(this).click(function(){
    TweenLite.to(window, 1, {scrollTo:{y:"#section" + (index+1), offsetY:70}});
  })
}) 

... but in plain vanilla JS. Here's the pen i got so far: 

 

See the Pen gJorWN by fedechinaski (@fedechinaski) on CodePen

 

But that doesn't work. Any thoughts?

 

[Scrollmagic + GSAP: apply the same scene to all the elements of the page with the same class]

Thanks Carl.

Made a codepen with a reduced test case and the JS code I already had works just fine!
Anyway, here is the codepen in case there is someone trying to do the same thing.

 

See the Pen oOXrRY by fedechinaski (@fedechinaski) on CodePen

 

[Scrollmagic + GSAP: apply the same scene to all the elements of the page with the same class]

Hi GSAPpers! First post in the forum... I code mainly html and css (and some -little- jQuery) and now I'm learning GSAP and "modern" vanilla JS since two week ago.
Today I'm testing GSAP combined with Scrollmagic. I'm trying to apply the same scene (a simple TweenMax with a fade in from the bottom) to all the elements of the page with the class "fadeInBottom".  I can do it with this jQuery:

 

let controller = new ScrollMagic.Controller();

$('.fadeInBottom').each(function () {
    // build a tween
    let fadeInBottom = TweenMax.from($(this), 1, { y: 100, opacity: 0 });
    // build a scene
    let scene = new ScrollMagic.Scene({
        triggerElement: this,
        offset: -200,
        reverse: false
    })
    .setTween(fadeInBottom)
    .addTo(controller)
});

 

Now i'm trying to do the same in plain vanilla JS:

 

let controller = new ScrollMagic.Controller();

// FadeInBottom
let fadeElem = Array.prototype.slice.call(document.querySelectorAll(".fadeInBottom"));
let self = this;

fadeElem.forEach(function(self) {
    // build a tween
    let fadeInBottom = TweenMax.from(self, 1.5, { y: 100, opacity: 0 });
    // build a scene
    let scene = new ScrollMagic.Scene({
        triggerElement: self,
        offset: -200,
        reverse: false
    })
    .setTween(fadeInBottom)
    .addTo(controller)
})

 

But it just doesn't work. And the console says

 

Uncaught ReferenceError: controller is not defined
    at index.html: ".addTo(controller)"
    at Array.forEach (<anonymous>)
    at index.html:861 "fadeElem.forEach(function(self) {"

 

Any help would be appreciated. Thank you!