Leaderboard

Hey MSCAU, Indeed, I am afraid you have missed the crutial point. It doesn't matter that you update your fixed_offset_top variable. GSAP only reaches out to read it when the timeline is initialized, not when it is played. Like you said yourself earlier on, it keeps those values 'in memory', it does not keep a reference to your variable. So, updating it has no effect whatsoever. Again, all you need to do is create a new timeline whenever you want to change its parameters. See a fork of your latest pen bellow with an example.

You can trigger the draggable using startDrag method, you need to pass event data as parameter. It won't matter if the mouse is down or not. https://greensock.com/docs/Utilities/Draggable/startDrag()

Re-creating the timelines is a great solution, though I also wanted to point out that if your goal is to clear out any recorded starting values, you can simply invalidate() the timeline which will force it to re-record any starting values on the next render.

In your site (not codePen) I see a "svgDoc is null" - You seem to be trying to reach for something before it is available.

Hi MSCAU! Looking at your example Pen (which is very helpful, thanks), I don't see where you are listening to the window resize event. In order for you to achieve what you are describing, you need to recreate your timelines every time the window changes size. You are correct in saying that GSAP is remembering the tween's positions - that's exactly what is meant to do. So, you have to add an event listener for the window resize and trigger override the timelines you have with fresh ones.

I would say you are mixing settings and behaviour where you should not. The idea of a settings object is to hold references to a bunch of, well, settings... Those references can be of methods, I don't see an issue there. But, you shouldn't try to perform actions from the setting object. By adding calls to DOM methods on your settings object, it makes it completely dependant on the DOM being available at the time of your settings object being initialised. That's not something you want. You want the setting to be on its own and only when the DOM is ready, you store the references to the DOM elements on your settings. E.g. let SETTINGS = { ui: { el: undefined, ref: '.my-button', dur: 1, vars: { x: 100, autoAlpha: 0 } } }; // Then at your initialization code: SETTINGS.ui.el = document.querySelector( SETTINGS.ul.ref );

Ya it would be steep but if you spend some time around forum looking at questions even though they are not related to you, you will learn a lot. I gave it another try and I think this is what you are trying to do. Some of the things I would like to point out, 1. You are using files with 'latest' links but those files are 3-4 year old, latest version is 2.0.2. 2. The way you had written your code works but it is incorrect because spriteslider is your proxy element. So you shouldn't assign your actual elements as properties to it. 3. GSAP 2.0.2 was released yesterday with a new callback called onPressInit which lets you adjust your element before Draggable records your values, so I am using it to reposition the proxy element. But in above demo you will notice jumps when you mouse over at random position. You can animate to that position by using manual easing, it is little bit advanced but just basic Maths. Here instead of directly applying calculated progress, I am using another variable called spriteProgress. Then on every frame I am using that value to ease the tween for smoother effect.

Sweet. Now I just need to keep the state of the frame when it leaves the area. I will fix after playing with it and update this post for anyone trying to do it in the future. I'm an Adobe Edge Animate refugee. I like this better, but it's a steep learning curve.

You don't need to append your proxy element 'spriteslider' in the DOM. It can work without appending. Solution for your problem is pretty simple, create a tween with stepped ease that will animate through your spritesheet. While dragging set your tween's progress as draggable.x/containerWidth. On mouseleave you can reset the progress and on resize you can recalculate the containerWidth and reset everything back to zero. The main problem with your implementation was you were using mouseenter on 'spritetarget' and mouseleave on container. I had hard time editing it, I was going to give up but here it is.

Aha, the light bulb has gone off! I had no idea tweens are crystallized at the time of instantiation. Thanks for explaining that, @Dipscom. I like @Greensock's suggestion too which led me to the apposite video on https://greensock.com/docs/TweenMax/invalidate and the solution to the problem: https://codepen.io/MSCAU/pen/oPxEwY

Hi Irine, Welcome to the forums! I am finding a bit difficult to understand your description of the issue here so, forgive me if it is not what you meant. I would say you have over eningeneered your setup a bit. You don't need all those different <transition> tags. And that's pretty much the reason why your animation is overlaping. Because all those <transition> tags are independent and they do not have the means to talk to each other. To achieve what, I believe, you intend, you need to have all your elements inside the same <transition> tag. See the bellow fork of your pen: You might want to go over Vue's transition documentation, if you haven't already, they will explain all the key concepts in detail there. https://vuejs.org/v2/guide/transitions.html

if you want to upload zip of just the bare-essentials to replicate the issue that is fine. We don't need something with bootstrap or dozens of dependencies. Try to make it as simple as possible. One more thing I noticed from your screenshot is that it is not clear that you are loading script.js from the proper location, but I would think that the browser would have shown an error in the console. the screenshot below shows the script I am talking about and the path it looks like it should be coming from

That is indeed a phat chunk of code... It does seem to me a bit too much still. However, it does help a ton to understand where you are trying to get to. Thanks for that. 1. The reverse isn't working because you are calling the function that creates the timeline rather than telling the timeline originally created to play in reverse. 2. You send the done() down as a callback. Have a lookie at this fork. It accomplishes what you are describing as your intention. See if it helps you.

Hi ad welcome to the GreenSock forums. We did't write that tutorial so its kind of tough to troubleshoot it. Might be good to reach out to the author for the best support. Also its very difficult to troubleshoot a complex javascript demo by looking at a screenshot of your dev environment. However, one thing that should be fixed is that you are loading 2 different versions of TweenMax: 2.0.2 and 1.20.3, you probably just want 2.0.2 Since the CodePen is working, something you can do is export a zip and inspect it locally. Try to match your dev version with what you have in the CodePen. In CodePen there is an "export" button in the lower right.

For that you will want to use the Window.matchMedia() method. if (window.matchMedia("(min-width: 400px)").matches) { /* the viewport is at least 400 pixels wide */ TweenMax.to(el, 2, { x: '-100%', ease:Power1.easeInOut, onComplete: done }); } else { /* the viewport is less than 400 pixels wide */ TweenMax.to(el, 2, { x: '-400px', ease:Power1.easeInOut, onComplete: done }); }

Wow thanks for the great response Carl, this is way more comprehensive than I was expecting Apologies for the belated reply have been away all weekend. You've taught me a lot about GSAP here as well as the JS Math.random() object method, really appreciate it. The catch with this approach that I can see however is that a designer can't target individual elements consistently to fix any small position or issues, not really a problem with circles but if for arguments sake you were to use a different shape it might look a little messy. So after having a play I amended the HTML to a round 90 <div> added some CSS classes to control the sizing for the centre elements, switched the Math.random() to an index calc and the elements starting .progress via index/180... et voila hopefully now a consistent sphere with opacity effect! This is arguably not efficient, so will be playing some more today to see if it can't be done more easily and maybe re-create using <svg> to see if i can't get it responsive! Thanks again though, your advice was awesome. Have amended the CodePen to reflect changes:

Yep. Less code. The key is so that Vue will know they are different components. The single transition tag is so that it knows when the component has left or finished animating. You can't have two transition tags talking to each other. I have a ton of headeache whenever I forget this and end up nesting two transition tags.

I work alone too so I don't really have some special setup other than using functions to create timelines, what @GreenSock shared.

That is fine, a little too much to type for me to use one variable. I would prefer to break into multiple objects to separate them in specific settings. But if it works for you and your team then there is no problem. Everybody prefers to declare their settings/variables differently.

I don't think a dummy value will work as it's not a real element, but it really doesn't matter if you tweened a real element because you're holding references to the same objects. You'll need to clean up after yourself and null all these timelines out if want them to be available for garbage collection. var t1 = new TimelineMax({repeat:-1}); var t2 = new TimelineMax({repeat:-1}); var t3 = new TimelineMax({repeat:-1}); var t4 = new TimelineMax({repeat:-1}); var t5 = new TimelineMax({repeat:-1}); var t6 = new TimelineMax({repeat:-1}); var t7 = new TimelineMax({repeat:-1}); var t8 = new TimelineMax({repeat:-1}); var t9 = new TimelineMax({repeat:-1}); var t10 = new TimelineMax({repeat:-1}); var t11 = new TimelineMax({repeat:-1}); var t12 = new TimelineMax({repeat:-1}); var t13 = new TimelineMax({repeat:-1}); var t14 = new TimelineMax({repeat:-1}); var t15 = new TimelineMax({repeat:-1}); var t16 = new TimelineMax({repeat:-1}); var t17 = new TimelineMax({repeat:-1}); var t18 = new TimelineMax({repeat:-1}); var t19 = new TimelineMax({repeat:-1}); var t20 = new TimelineMax({repeat:-1}); var t21 = new TimelineMax({repeat:-1}); var t22 = new TimelineMax({repeat:-1}); var t23 = new TimelineMax({repeat:-1}); var t24 = new TimelineMax({repeat:-1}); var mainT= new TimelineMax({paused:true})

Let me use my psychic powers. It's unclear if GSAP is being used, but I am seeing p5.js. That's the only thing I know of that uses a draw() function. We don't get a lot of questions about p5.js, but it's pretty to easy to animate with GSAP. I remember helping somebody with p5.js here.

perhaps this will be of some help

In your example you are calling reverse on timeline but timeline's playhead is already at zero so it will never do anything. You can overcome it by passing 1 as progress from which you want to reverse. A better approach is to assign timeline to a variable and use it to play or reverse, which I have done in my example below. You also don't need to use conditional statements while creating events, because you are writing your own project. It only makes sense to do so if you are writing a plugin or something. As for using functions to create timelines, it can be your personal preference but I think it makes more sense for complex animations or where more than 3-4 tweens are involved. Anything less than that just adds complexity to your code which can be written in fewer lines.

Hi tusha3 Welcome to the GreenSock forum. If I understand your question correctly, you want to start dragging an element simply by hovering over it? I don't think Draggable would be the best choice for that. You'd probably have to set up a function that listens for a hover and then link the mouse position to the elements position. My questions would be how do you stop dragging? A click? How would you handle dragging on mobile devices with no hover events? What if someone accidentally hovers and starts dragging the element? Just my two cents worth, but that would feel counter-intuitive to me. Good luck and happy tweening.

And to add to Mr PointC's great advice, here is another example that animates the SVG element and the mask separately http://codepen.io/jonathan/pen/OyarJK They both use the GSAP AttrPlugin http://greensock.com/docs/#/HTML5/GSAP/Plugins/AttrPlugin/

Hi CarpeDiem You can use that shape as a mask or a clip-path. Here's a pen I made a while back to demonstrate basic usage of a mask in SVGs. http://codepen.io/PointC/pen/KzmXYK That should get you started in the right direction. Happy tweening.