Jump to content
GreenSock

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

ScrollTrigger animating all at once

Recommended Posts

Hi, 

I'm new to gsap, but didn't found any post according to my problem. The point is, that if I prepare a timeline itself and it's played outside scrolling trigger, all delays, segments are running well. But when I put a default scrollTrigger to the timeline attached to section#how-we-work it plays all of the animations at once without any delay. Looks like scrollTrigger ignoring all of delays set. Here below some code I use, thank you for any hint how to solve this:

 

gsap.registerPlugin(ScrollTrigger);
//gsap.registerPlugin();

ScrollTrigger.defaults({
	toggleActions: 'play pause reverse none',
	markers: true,
});


$( document ).ready(function() {
	var tl = gsap.timeline();
	tl.from('#top-menu',{
		y: -100,		
		duration:1,
		ease: "back"			
	});


	var panel_how = gsap.timeline({ defaults:{
			delay:2,
			duration: 1,		
			opacity: 0,
			scrollTrigger:{
				trigger: '#how-we-work',
				scrub: 1,
				pin: true,				
				start: 'top 10%',
				end: 'bottom 50%',
				id: 'panel-how',				
			}					
		}
	});

	panel_how
	.from('#cms404_module_31 .cms404_module_header',{x: 100, ease: 'back(2)'})
	.from('#cms404_module_31 ._CMS4Toolbox p',{x: -100, ease: 'back(2)', })
	.from('#cms404_module_31 ._CMS4Toolbox .btn',{y: 20, ease: 'back(2)', duation: 1})
	.from('#lg-dots-1 ',{ scale: 0, duration:1, transformOrigin: '50% 50%' })
	.from('#lg-dots-2 ',{ scale: 0, duration:2, transformOrigin: '50% 50%', delay: 0.5 })
	.from('#lg-dots-3 ',{ scale: 0, duration:3, transformOrigin: '50% 50%' },'+=1')
	.from('#COG',{ y: "-5", scale: 0.5, transformOrigin: '50% 50%' },'+=1')	
	.from('#CLOUD',{ y: "-5" })
	.from('#EQ',{ y: "-5" })
	.from('#LINE',{});
	
});

 

See the Pen GRoXJmq?editors=1000 by 404ideas (@404ideas) on CodePen

Link to comment
Share on other sites

Hey 77ideas and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Club GreenSock member!

 

The ignoring of delays in ScrollTriggers with scrub is purposeful because scrubbed animations are intended to control the progress of animations directly. How are you imagining that a delay on a scrubbed animation would work? 

 

Are you just wanting blank space at the top of the ScrollTrigger section? If so, just add a blank tween like.to({}, {duration: 2}).

Link to comment
Share on other sites

30 minutes ago, ZachSaucier said:

Hey 77ideas and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Club GreenSock member!

 

The ignoring of delays in ScrollTriggers with scrub is purposeful because scrubbed animations are intended to control the progress of animations directly. How are you imagining that a delay on a scrubbed animation would work? 

 

Are you just wanting blank space at the top of the ScrollTrigger section? If so, just add a blank tween like.to({}, {duration: 2}).

Hi, thank you for your reply. I understand that delays are ignored by scrubbed animation, but what I imagine is to control the animations controlled by scrollTrigger are firing in first second, there is no "timeline" and order of each element animations as I understand it.  

 

var panel_how = gsap.timeline({ defaults:{
			delay:2,
			duration: 1,		
			opacity: 0,
  			// 
			// scrollTrigger:{
			// 	trigger: '#how-we-work',
			// 	scrub: 1,
			// 	pin: true,				
			// 	start: 'top 10%',
			// 	end: 'bottom 50%',
			// 	id: 'panel-how',				
			// }					
		}
	});

 

For example when I comment the scrollTrigger ( like this sample code ) lg-dots-1 should show up first and then lg-dots-2, then Icons on them and so on.  When I define the scrollTrigger to this timeline, all objects are playing like "from first frame", all SVG, text elements are playing from first touch when trigger meets the start point eg. all lg-dots-* are showing up same time.  

 

 

Link to comment
Share on other sites

I see. The issue is that you have the ScrollTrigger in the defaults object, so each one of the tweens inherits the ScrollTrigger and creates one for each tween. You should have the ScrollTrigger outside of the defaults object, applied on the timeline itself:

var panel_how = gsap.timeline({ defaults:{
  delay:2,
  duration: 1,		
  opacity: 0,
}, scrollTrigger:{
  trigger: '#how-we-work',
  scrub: 1,
  pin: true,				
  start: 'top 10%',
  end: 'bottom 50%',
  id: 'panel-how',				
}});

 

  • Like 3
Link to comment
Share on other sites

Thank You! Now it works perfect! 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×