[Position of animated element with ScrollTrigger]

Hi,

i'm dealing with some problem, I'm trying to animate dot1 from source position defined in css, to point X defined by offset.top / offset.left of target place in one scrollTrigger, then same dot from last position to next place, but when I do this second animation starts with source position from css not the position changed by animation, how can I force "white dot" to start from top, left which has been set by first timeline ?

For better understanding my problem take a look at codepen where the dots are animated.

See the Pen GRoYEWE by 404ideas (@404ideas) on CodePen

[Opacity problems with ScrollTrigger]

O my ... thanks a lot, that's not what I thought its working. I thought it's saving latest value after animation, so when I animate from 0->1 it saves 1 as a latest value. 

According to this case of latest cached values, could you @ZachSaucier tell me how can I get latest values after animating an element? E.g. I move some object to x:200 from it's css defined position, how can I get coords of this element after / during animation? I'd like to move some element from it's position to exact position (x,y) of other element. Is there any property responsible for that or should I try to catch these coords outside gsap lib using jquery / javascript ?

[Opacity problems with ScrollTrigger]

Hi,

another problem which I'm dealing with. I've got two timelines hero which is only played and that's all, and the second one is hero_out which should be controlled by ScrollTrigger object. The point is, that all is almost perfect, but I've found some issues with opacity of a button. When I use opacity: 0 in second timeline buttons just disappear like display: none, not fading out like its fading in the hero timeline. Attached the codepen where you can see moment when button disappears.

 

Hero timeline just to play on entering the page looks like this:

hero
/* 
some other stuff before button animation
*/
.from('.carousel-caption .btn-secondary',{ y: 20, opacity:0},'-=0.25');

 

And basically same code but different direction (hiding elements on scrolling down), but controlled by ScrollTrigger

hero_out
// some other stuff animated before button
.to('.carousel-caption .btn-secondary',{opacity: 0, x: -100, duration: 1},"<");

ScrollTrigger.create({
	animation: hero_out,
	trigger: '#main-slider',
	start: '80% 50%',
	end: '100% 50%',
	scrub: 1,
	pin: true,
	id: 'hero_out'
});

I can't understand why opacity is ignored in this animation when I create scrollTrigger, why the .btn-secondary or .btn-primary animation doesn't work.

Thank you for any helpful answers 

See the Pen abdaBKr by 404ideas (@404ideas) on CodePen

[ScrollTrigger animating all at once]

Thank You! Now it works perfect! 

 

[ScrollTrigger animating all at once]

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.  

 

 

[ScrollTrigger animating all at once]

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