Jump to content


  • Posts

  • Joined

  • Last visited


0 Newbie

About guaby18

Profile Information

  • Gender
    Not Telling
  1. Is there a way to not play a tween until the first tween finish? So if I scroll fast the last animation don't play until the first one.
  2. Have a new question hehe. If you see now, the page section index (2D, 2.5D, 3D) change on scroll. Do you know a way to make the animation not be crazy if you scroll fast? How do I make the interaction more cleaner? If there's a way.
  3. Oh men. You are the best!!! Thanks a lot!!! I have to define all at first. Thanks a lot!
  4. Sorry I commented to do other stuffs. I will uncomment now so you can view the problem. Thanks.
  5. 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: 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).
  6. GSAP SVG Transform Origin bad behavior


    I'm trying to make this orbits rotates from the center (transfrom-origin: 50% 50%) but why it's still moving?


    Why its doesn't rotate in the middle. And if you keep clicking the other planets it get a mess (need to uncomment to see it ). What I need to do to keep things always centered and not move around when rotating. Thanks a lot guys.

    1. Carl




      Please post this as a new topic in our public support forums: https://greensock.com/forums/forum/11-gsap/

      These profile feeds are not for 1 on 1 support. 


      I'd suggest simplifying your demo to just a few tweens or lines of code that clearly illustrate the issue. We can't try to debug 200+ lines of code.





  7. @OSUblake hope you are ok. I'm new in the club and don't know if you can help with something that I really struggle with:


    I want to make planets move when you click them and don't know why the transfrom-origin is not center al the time. Please can you check this code?


    I need serious help and I ask every where and nobody answer anything. I have spend 16+ hours on this problem and still don't have an answer.