Jump to content
Search Community

fedehache

Members
  • Posts

    6
  • Joined

  • Last visited

fedehache's Achievements

  1. Well... I found that tweaking the anim duration from .6s to say 2s, the trackpad advances just one panel at a time.
  2. hi @mikel I'm looking at the "Vertical Full Screen Slider" demo @ https://codepen.io/PointC/pen/MzWzyv 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?
  3. that was fast @mikel. Thank you!
  4. 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: https://codepen.io/fedechinaski/pen/gJorWN But that doesn't work. Any thoughts?
  5. 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.
  6. 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!
×
×
  • Create New...