Jump to content
GreenSock

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

guaby18

ShockinglyGreen
  • Posts

    6
  • Joined

  • Last visited

Posts posted by guaby18

  1. Hello everyone, need help here,

     

    1. I don't know why but my codepen works but when I implemented on the website does not work. Any reasons why?

     

    2. On the other hand, how I make these transitions more secure? Because when you scroll fast the animations has his glitches some times.

     

    codepen:

    See the Pen eExGqV?editors=1010 by G-ROS (@G-ROS) on CodePen

    I don't know why it's doesn't work on the website.

     

    these is the website code. The same!!! Just change the scroll triggers

     

    // Scroll Interactions
      //Init Controller
      let controller = new ScrollMagic.Controller();
      // Ball Scene
      let ball = $('.ball');
      let xCenter = window.innerWidth/2;
      let yCenter = window.innerHeight/2;
      let ballTl0 =  new TimelineLite();
      let ballTl =  new TimelineLite();
      let ballT2 =  new TimelineLite();
      let ballT3 =  new TimelineLite();

      let ballScene0 = new ScrollMagic.Scene({
        triggerElement: '.hero-heading',
      })
      .setTween(ballTl0)
      .addIndicators()
      .addTo(controller);
      
      let ballScene1 = new ScrollMagic.Scene({
        triggerElement: '#feature1',
      })
      .setTween(ballTl)
      .addIndicators()
      .addTo(controller);
      
      let ballScene2 = new ScrollMagic.Scene({
      triggerElement: '#feature2',
      })
      .setTween(ballT2)
      .addIndicators()
      .addTo(controller);
      
      let ballScene3 = new ScrollMagic.Scene({
      triggerElement: '#feature3',
      })
      .setTween(ballT3)
      .addIndicators()
      .addTo(controller);
      
      // Change index
      
      function changeIndex() {
        console.log('change index!!!');
      }

      ballTl0
        .to(ball, .8, {css:{ x: '-12%', borderRadius: '50%'}, ease: Elastic.easeOut.config(.5, 0.4)})
      
      ballTl
        .to(ball, .8, {css:{ x: '10%', borderRadius: 0}, ease: Elastic.easeOut.config(.5, 0.4)})
        ;
        
      ballT2
        .to(ball, .5, {css:{ x: '-50%', borderRadius: '50%', scale: .5}, ease: Elastic.easeOut.config(.5, 0.4)})
        ;
        
      ballT3
        .to(ball, .5, {css:{ x: '-90%', borderRadius: 0, scale: 1}, ease: Elastic.easeOut.config(.5, 0.4)})
        ;

     

    website:

    http://muuaaa.webflow.io/home-newer

     (webflow for fast prototyping and great for design focus. I include de js I want).

     

     

×