Search the Community

I have a master timeline, which consists of two child timelines. The problem I am facing is that both the timelines are firing exactly at the start, rather than going sequentially. I tried specifying the position of the second timeline using ">", but it just does not work. The second timeline still fires at the start of the entire master timeline. function Home(){ const tl = new TimelineMax({ onComplete: afterHomeTimeline, scrollTrigger:{ trigger: ".home__card--1", start: "top " + $(".home__card--1").offset().top, end: "top -2000", markers: false, scrub: 1, } }); // Below are tweens added to the Home timeline tl.to(".home__card--1", {y: -($(".home__card--1").offset().top - home__header_height - $(".home__card--1").offset().left)}, "0") tl.to(".home__card--2", {y: -($(".home__card--1").offset().top - home__header_height - $(".home__card--1").offset().left)}, "1") tl.to(".home__card--content-1", {"width": $(".home__card--content-1").width() - (($(".home__card--1").offset().left + $(".home__card--1").outerWidth()) - $(".home__card--2").offset().left)}, "1") tl.to(".home__card--3", {y: -($(".home__card--1").offset().top - home__header_height - $(".home__card--1").offset().left)}, "2") tl.to(".home__card--content-2", {"width": $(".home__card--content-2").width() - (($(".home__card--2").offset().left + $(".home__card--2").outerWidth()) - $(".home__card--3").offset().left)}, "2") tl.to(".home__scroll", {opacity: 0}, "3") tl.to(".home__header", {rotate: -90}, "3") tl.to(".home__content", {rotate: 90}, "3") var cardWidth = $(".home__card--1").width() - (($(".home__card--1").offset().left + $(".home__card--1").outerWidth()) - $(".home__card--2").offset().left - $(".home__card--1").offset().left) tl.to(".home__card--1", {width: cardWidth}, "4") tl.to(".home__card--2", {width: cardWidth}, "4") tl.to(".home__card--3", {width: cardWidth}, "4") tl.to(".home__card--1", {y: -$(".home__card--1").position().top - $(".home__card--1").position().top - $(".home__card--2").width(), rotate: -40}, "5") tl.to(".home__card--2", {y: -$(".home__card--2").position().top - $(".home__card--1").position().top - $(".home__card--2").width()}, "5") tl.to(".home__card--3", {y: -$(".home__card--3").position().top - $(".home__card--1").position().top - $(".home__card--2").width(), rotate: 40}, "5") tl.fromTo(".scroll__1", {opacity: 0, color: "#ffffff"}, {opacity: 1, color:"#993F3F", duration: 8}, "6"); return tl; }; function Portfolio(){ const tl = new TimelineMax({ onStart: console.log("Oh cmon it started again") }); tl.to(".scroll__2", {opacity: 1, duration: 8}, ">"); return tl; }; const master = new TimelineMax(); master.add(Home(), 1).add(Portfolio()); console.log(master.getChildren(false,false,true))

I want to pin a dropdown menu to a specific spot when my navbar gets pinned to the top. When you click the "Day 1" element in the navbar, then .dropdownL scrolls down. I need .dropdownL to be positioned absolutely so that it scrolls down directly beneath "Day 1" UNTIL "Day 1" gets pinned to the top of the screen. At that point, I want .dropdownL to have a position: fixed, top: 50px and left: 2.5vw. How do I set the pin position to this very specific spot please?

I'm have a panoramic SVG with three main focal points. I style it to be wider than the user's monitor, and the idea is as they advance from one position to the next in the UX, the SVG will pan to center each of those three points to give the impression of moving along the X-axis. I'm also zooming in and out when the "frame" changes. I can calculate the center of each focal point and provide GSAP with an x coordinate describing how it should transition left to give the impression of forward motion. I use `scale` for zooming. However, I must to provide a positive `position` property to the `.to()` to ensure the two events don't happen at the same time, or the transform-origin causes problems: It's not linear forward movement; the animation tugs back and forth. I think it would be better looking if both props animated at the same time. I have tried adding an `onUpdate` callback attempting to adjust the transform origin as the animation progresses, but it doesn't work at all. something like: const setTOrigin = gsap.quickSetter(this.selector, 'transformOrigin') onUpdate: () => { // const currentOrigin = gsap.getProperty(this.selector, 'transform-origin') setTOrigin(`${animation.progress() * centers[1]}px`) // centers is an array of the focal point centers coords } Not sure this is even a good idea. Just something I tried. What I have, technically works. But it is pretty janky. And again, doesn't provide the option to use negative positions to make the animation quicker and smoother. I've made a minimal reproduction here hoping someone can offer some guidance: https://codepen.io/thomas-hibbard/pen/RwqbymO Thanks for any insight.

?? hello fellow humans. feels really nice to join this awesome community. i found so much help here already. now its time to make my own first post. - - - so! i would love to get some help on positioning tweens inside a timeline as i was not able to find an elegant solution until this point. the attached image explains what i got and what i want. so i have a main tween in my timeline that has a duration of 2s. and a few others that are shorter in time. now, basically i want to dynamically align all the other tween endpoints with the main tween's endpoint. i say dynamically because tween durations will change within the website. i know that i can use the relative position parameter for this. and with absolute numbers it works beautifully: // create timeline let timeline = gsap.timeline(); // add tweens timeline.add(container.fadeOut(), 0); timeline.add(elements.fadeOut(), '-=1.2'); timeline.add(footer.fadeOut(), '-=1.4'); timeline.add(progress.reset(), '-=1.8'); but what happens if for example my footer.fadeOut() tween changes its duration to 0.8s? with my code example, the endpoints of footer.fadeOut() and container.fadeOut() are not aligned anymore. how can i dynamically change the -1.2s to -0.8s? how can i subtract the tweens own duration, relative from the timeline endpoint? and how can i do this elegantly without using tons of variables to get each tween's duration? thank you so much for taking your time. stay healthy, stay safe. jaro ??

Hi there. I'm new to Greensock and struggle at my first animation. What I'm trying to do: shrink the logo, change the background of the header to transparent (got a background video) move the logo in the header up fix the logo to the top Any suggestions? ? Thanks in advance, Eddy

Hi everyone! Sorry, if the answer is already there, but I couldn't find it. I have 2 SVG tags. 1) Source SVG sprite with 2 <rect> shapes. 2) And the second SVG is pulling elements from the first SVG with <use> tag. The task is to move both shapes from the source SVG to the same point (x, y) using your library. Now they are moving together and to different points. Thanks for your attention, and any help would be greatly appreciated. Thank you!

Hiya everyone. I am new here but really hoping someone can help me out as I would love to use this amazing library to achieve this cool effect just posted on codrops; (https://tympanus.net/codrops/2020/07/01/creating-a-menu-image-animation-on-hover/). You'll see in the article it explains that the effect works on the direction of your cursor - actually it has two effects, one for when the image is revealed/hidden and the other for moving the mouse over the nav title. I'm trying to adapt the direction based element of this effect into a Webflow project and I am struggling with this because the tutorial seems to go the long way round of achieving these effects (see the layout at the start of the tutorial) and also the fact that there are multiple JS files created. I am fairly new to js and also GSAP (love it though) so a lot of this is a bit overwhelming and also makes it very hard to achieve using Webflow but essentially I would like help with these two directional based effects on hover; 1) I just want to reveal and hide elements on hover with the direction dependent on the mouse direction 2) moving the mouse to the left rotate's the image to the left, and to the right it does the inverse. If anyone is able to offer me help I would hugely appreciate it! Thanks so much

Hi, I need some help with positioning the div. I have three main sections with 100vh. The middle sections have six more sections. What I am trying to achieve is when the user scroll to middle section the scroll does not move to last section until it finish scrolling the child sections of main middle section. Does anyone know how I can achieve that with gsap. I have tried below solution, ut its not working for me. Thanks

Dears, i have created an svg rect inside a group and i have make this svg group to have "transformOrigin:'center center' " explicitly then draw a little blue circle at this group returned position my question is when i am trying to rotate the svg group then resize it the return location is wrong and it's not at the center of this group, how i can keep my reference point at the center of this group all the time with all different transformation? https://codepen.io/Shouha85/pen/MWgxNwP?editors=1010

Hey everyone, I have recreated the card animation from the iOS app store, but having problems with the positioning when wrapping multiple cards on to one line. In the attached pen, when the user clicks a card, the card should expand to the whole screen and at the same time reposition to the top of the viewport. The animation works great for the first card in each row, but every card after that in a row will not travel to the top of the viewport and stops about halfway up the page. Anyone have any suggestions on how to correct this unwanted behavior?

Hi, I've created a TimelineMax instance with a series of child TweenMax animations. I need to play the timeline backward and forward to transition between two states. This works great. When executing a reverse() only, I want some of the child animations to have lower position values, to speed up the animation as a whole. I keep references to the ones I want to target, and then use remove() to strip them from the timeline, before then re-adding them for the reverse(), with revised values. I've scoured the forum for an answer and have read much about how changing child tweens does not affect the overall duration of a timeline (which, when you alter / remove child tweens somewhere in the middle, makes sense) but in this case, the tweens I want to remove are the last ones in the timeline. Before I re-add them, is there a way to force the timeline to recalculate its duration, so that when they are re-added, they are appended after the last child. As it stands now, there is 'dead space' on the timeline where the tweens were, and so, when re-adding them, there is a long pause before they are played. The pause gets longer with each play() and reverse() (and remove() and add() as the total duration grows and grows.

I'm trying to move paths created in a Illustrator to a given position. In the codePen, I move the group, then morph the balloon and move the stars. The 2 targets are positioned at 100,300 and 300,300 (in pixels) in Illustrator. I've tried a variety of techniques but none seem to work...

Hey guys, I am new to all of this and trying really hard to create a banner where 3 lines of text stagger in ( from left to right ) then bounce and then slowly fade out. Would also love the option to repeat this every so many seconds. I have explored the repeat -1 option, but cannot find the option to repeat an action every so many second. Question: How can i fade out from where the animation last ended? Thank you guys in advance and Gsap is Awesome!

✨

I'd like to have a dynamic duration for a tween. Example: A button animates and builds itself up. Then the text animates. While the text animates I want the button to scale just a tiny bit. The scale should exactly end when the text animation is complete. During development the timing of the text animation changes extremely often and differs dramatically. Remembering to set the scale duration by hand is annoying and unnecessary distraction. Calculating the timings of all the parts building the text animation is even more annoying. I'd love the scale-animation to have a dynamic duration alá "until end of text animation" or "until end of whole timeline" or even better "until label XY" If this isn't possible, which I fear is the case, how do you tackle timings of longer animations parallel to a queue of smaller pieces that should end together? Thank you!

Playing with the machine gun text effect from http://codepen.io/mfgpker/pen/cmiue?editors=1010 I need to be able to export these frames as PNG images but running into some trouble because of the way foreignObjects are seen I suppose. The original version of the machine gun text animation used jquery to create and address elements and, though the text was visible in the resulting PNG exports, the positioning information was completely ignored - even though the animation runs fine in the browser. So, I decided to go to great pains to namespace everything in case that was the issue. The animation works fine, but now, the exported images don't show the text at all. The other thing I wondered was if I needed to move the styles into the SVG or the foreignObject but that hasn't solved the real problem. I'm pretty sure it has to do with the way XMLSerializer is seeing or processing the data from the master SVG so I've been scouring the Internet to see if anyone else might have encountered this issue. Coming up dry. Is there anything I can do with GSAP's animation settings to circumvent what's happening in a way XMLSerializer would be able to process accurately?

Hi Guys, I'm trying to achieve something that probably is very simple but I think i surely missing something. So let's say I have a draggable in the position x:800 y: 200 Now I drag it to the position x:500 y:100, and after releasing the draggable, and from this point onward, I want to make the origin of the draggable this last position. So all the transformations would be applied from this last position. I hope my explanation makes sense . Is there a simple way of achieving this? Thanks.

If i repeat timeline comand tl.from(head, 0.5, {left:100}); it will repeat objects movement stating from position defined in css. Is it possible to move same object several times from previous position? So instead of tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:200}); - 100px tl.from(head, 0.5, {left:300}); - 100px it would be tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:100}); - 100px

I'm using Draggable to give a few elements the option to be dragged around the viewport. I have a function that I'm calling later on that needs the position (x,y) of these dragged items. Is it possible to get the x and y values of those dragged elements? OffsetTop is not working due to the 3d translates.

Hello, I'm expanding on a pen I already posted a couple of days ago, and trying to figure out ways to write a cleaner timeline. The whole thing will be a sequence of images, or slides, always fading to the next. In the example there are 3, but they might as well be 100. For the basic behaviour, fading in and out, I have this: $.each($('.slide'), function(i) { tl.add([ TweenMax.to($('.slide-' + (i+1)), 1, { opacity: 0, immediateRender: false }), TweenMax.to($('.slide-' + (i+2)), 1, { opacity: 1, immediateRender: false }) ], '+=1'); tl.add('slide' + (i+1)); }); }); Notice that I'm also adding a label after each step. At this point, I would like to add variations at specific point. For example, after the slide-2 animation is complete, I want something to happen before proceeding to slide-3. I thought I could simply add a new Tween to the timeline, using the label as a position marker, like this: tl.add(TweenMax.to('.slide-4', 1, {opacity: .5}), 'slide2+=1'); What I'm expecting, is to see the slide-4 to appear after the 2, but instead it seems to ignore the position parameter. Am I again missing something about the position or my approach is totally wrong?

Hi Greensocks, after reading tons of topics on the subject of animating svg I did not find an answer that works properly for my goal. Now I desperately need your help: Elements inside my svg are scaled to 2.8 by click. After that I need them to be centered inside the viewbox. Scaling works fine, centering does not. Do you have any suggestions? Cheers Gregor

Hello, I'm trying to make an animation where at some point there's a sequence of images, one on top of each other, with each image just disappearing to show the one right below. They are absolute positioned and I'm controlling their appearance by simply tweening their opacity. Since I don't want a fade effect, I thought I would set the duration to 0. But this way it seems to ignore the position parameter I set. In the pen I created, I'm expecting to see the number 1, first. And after 1 second of scrolling down, the number 2. Instead, it appears directly the number 2 and the weird thing is that if I scroll back, it actually appears the number 1. Setting both duration to 1 make it actually to work, but I don't get what the issue is. Am I missing something about position and duration?

Hi everyone, I recreated a codepen that replicate more or less my problem (for using that click somewhere in the white area) I'm trying to achieve something like the one you can see. I need to open a "fixed popup" that everytime change it's initial position. If you try the pen everything works fine for the only first click but if you try to click again you can see that the "modal" still opening from the position you clicked the first time. Can anyone explain whats is going on? ps: I added a delay so you can see clearly what's is going on. Thanks eveyone!

Hey guys, I am totally new to GSAP (I just started using it last night), not to mention a junior developer in general. I want to animate some elements on a page to move accross the page and fade out, all with the same class. The part I am confused about though, is that in order for the elements to move they must be given a position property of absolute or fixed. (At least that's what the greensock tutorial said I had to do). When I apply this position property to the elements with the class I want to animate, they all stack on top of each other in the same place. How do I keep the elements from starting and ending at the same place in the window with this css property applied?

Hi. I have trouble with Safari browser positioning of elements with TweenMax x and y. In all browsers car at this position: But in Safari car at the another position: Code: TweenMax.to("#car", 0.1, {x: 530, y: 262, scale: 0.6, transformOrigin: "50% 50%"}); How to fix it?