guaby18
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by guaby18
-
-
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.
-
Oh men. You are the best!!! Thanks a lot!!!
I have to define all at first. Thanks a lot!
-
Its uncommented now
-
Sorry I commented to do other stuffs. I will uncomment now so you can view the problem.
Thanks.
-
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).
Scrollmagic + Gsap multiple tween on same elements while scrolling the page
in GSAP
Posted
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.