77ideas

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.

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 ?

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

Thank You! Now it works perfect!

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.

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',{}); });