Leaderboard

Hi @codekai98 Welcome to the forum. The subject of this thread is quite similar to what you're asking and uses the demo you referenced too. I think it can help you. Happy tweening.

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.

My intentions weren't to discourage you from posting anymore questions, so don't hesitate. You can enable disable draggable entirely using those methods, but you can't disable certain methods. You will need to add conditional logic instead to avoid execution of certain code. But I am not sure why do you need it, It works just fine as it is. Are you using onDrag event instead of onDragStart? You don't need to do that. onDragStart fires only once and it fits perfectly with what you are doing.

I wasn't entirely sure what you were asking, but I did outline the reasons why I thought the pen would be helpful with regard to addressing the following ... Navigating between slides (scroll and keyboard arrows) Tweening child elements when reaching a slide Avoiding ScrollMagic Of course, though, if my understanding was off ... then the pen would also miss the mark.

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})

I'm scared of StackOverflow so, let's chat here and if I what I say can help you resolve your issue, I'll post the end result there. I must say I think you are going about this the wrong way. You should not be trying to save DOM elements into the store. Think of the store as a place to hold data or state, not elements. The component that contains the element you want to target is the one that should be doing the trigerring of events or responding to things. One issue you will encounter if you keep adding DOM elements to the store is that you now have to manage their existence in the store as well as in the DOM. Say you have a component you add to the DOM. You then, have it commit itself to the store. If you ever remove the element from the DOM, you will need to make sure it is also removed from the store. Why is it that you feel you need to add the element to the store? I think a better solution is to pass down whatever animation you want that component to perform instead. If you give us a more concrete example of what you are trying to achieve, I am sure we can work something out.

Sorry, but that onDragEnd just has way too many conditions for me to try to untangle. I suspect your kind of close, but its just really hard to look at code like this for the first time: if ( e.target.targetAttachedTo != $(targets[i]) && e.target.targetAttachedTo != undefined ) { e.target.targetAttachedTo.removeClass("occupied"); e.target.targetAttachedTo = undefined; //alert("Occupied class removed."); } and try to debug what it is doing, what it should be doing, and decide whether or not its even related to the issue. Hopefully you understand that many of us would love to help with this kind of stuff but it can be really time-consuming and we need to stay focused on the GSAP API.

Hi @codekai98 and welcome to GSAP! Here is a pen I threw together to help someone with a similar question a few months back ... it may be helpful to you too. It tackles a few things you mention in your post Navigating between slides (scroll and keyboard arrows) Tweening child elements when reaching a slide Avoiding ScrollMagic Hope this helps!

Try something like this. function onStop(){ mainT.kill() document.getElementById("main").innerHTML = ""; for (var i = 1; i < 25; i++) { window["t" + i] = null; } mainT = null; TweenLite.set(document.createElement("div"), { x: 100 }); }

@PointC Oh that is wonderful! Thank you so much ? and thank you @Shaun Gorneau as well for your help!

please provide a demo (the simpler the better) so that we can investigate further. thanks.

Correct. Apologies as I am still a tad sleep deprived from IRL issues. I've amended the original post to reflect that lest others will be misled. CodeSandbox is absolutely fine. Just put in the bare minimum to illustrate your issue.

Here are some variations. Feel free to experiment

You can have anything you like follow the path as it draws. Here's an example: Is that what you meant? Happy tweeing.

Sure, no problem. Check out this edit and look at the next() and previous() functions ... you'll see how we're looping around there. Happy tweening

Be careful @cgorton. This is how it starts. You post a few questions. You help a few other members. You start spending more time on the forum. Before you know it, you're suffering from GreenSock Fever. The only known cure is a promotion to Moderator, but then you spend even more time here. ?

anotheruser, i see you created a duplicate post: probably best to keep your issue separate. Please provide a demo that we can look at in that thread thank you.

I'm seeing a number of errors related to jQuery not being loaded. http://prntscr.com/km15lf Its very difficult for us to diagnose a live site, especially without any instructions about where your javascript is. Please try to resolve those errors. If the problem still persists please let us know where you think we should look or provide a reduced test case, even if its just a single page with only the SVG and the pertinent js code. thx!

Haha...scared of stackoverflow! Exactly my feelings! Thank you for your honest feedback, @Dipscom! Just to understand you correctly: This is exactly what I need! When you say: "You should be trying to save DOM elements into the store." ...then you mean "...should NOT be trying ...", right? I gladly will put together my example app and post it somewhere useful - I am thinking of codeSandbox instead of CodePen. Would that be ok?

Sure, can you please post a reduced test case, like maybe as a codepen or jsfiddle? It's super difficult to troubleshoot blind, but once we see what you're doing, I'm sure we can offer some help. See (You are using GSAP for the animation, right?)

@Jonathan you are a GSAP Jedi Thank you!

just amazed!

This should get you started. Happy tweening.

Glad to help!

Thank you so much really appreciate it.

@Shaun Gorneau thanks for this, I really appreciate it

Absolutely. Here is an edit with onmouseover to tween the opacity. onmouseout, on the other hand, is not tweening out because of what i suspect to be some interfering CSS. There are a lot of display, opacity, and visibility declarations making that a bit cumbersone to pinpoint. I also removed "transition: all .4s" ... making the follow much more snappy.

To get the timeline to play(), you need to add an event listener to your new text menu button. By setting the height of the nav to auto instead of 100% you can hide it up top. (You could also use 450px in this case.) You could add the new text button to the nav and it would go along for the ride. Or you could add a tween that moves that new button 450px at the same time as the main nav. Adding a tween to the exit animation will take that menu button back to the top. Keep in mind though that you're setting the autoAlpha of everything to 0 in your exitAnim so if a user closes the menu without clicking a link, the menu will not work correctly the second time they click the menu button because everything is hidden. You'll have to decide what to do about that. You could move the menu back up to y:-450 at the end of the exit timeline and set the autoAlpha back to 1. Or you could use fromTo() tweens. Or you could set the autoAlpha at the beginning of the entry timeline. You'll also have to tween your new button when someone clicks a link. Hopefully that helps. Happy tweening.

The problem with the original pen is that the CSS had the element positions fixed with some absolute offsets and some relatively positioned parents and then some calculations being made to dynamically affect the style.top and style.left. That's a lot to deal with! So, I find it easier to relatively/absolutely position the "hot-spots" and then position the tooltips absolutely within those parents at some "home" position. That could be 0 0 ... but in this case we don't want the text to overlap the hotspot by default, so I opted for 40px 40px. Now, that gets the initial position of the tooltips in place out of the gates ... not need for javascript at this point (which is good for graceful degradation). Now all we want to do is move the tooltip a small amount relative to the cursors position over the hotspot ... and we have a really good way to handle that with little calculation: the x/y position of the cursor minus the left/top position of the hotspot +/- some spacing (to your preference) and then use transform: translate(x,y) to move that small amount relative to its current position.

I've been following this thread in the background. So impressed by all the thoughtful and detailed answers the moderators have provided. However, what's even better is seeing the initiative @cgorton is taking to to study, practice and learn! So often people drop in here when they hit a snag just wanting us to provide a quick "copy and paste" solution that will hold them over until they hit the next problem... only to return again. Cgorton, I know many people appreciate the help the mods give them, but its extra special when we see the people we are trying to help APPLY what they've learned, take it one step further and continue to learn new things. Thanks for taking the time to share what you've learned along the way. Its really cool to see the progress and I know it means a lot to the mods to know their time is appreciated and being put to good use.

Thanks @OSUblake. That was really helpful. I was finally able to get a working prototype for an animation at work thanks to these examples. Still playing around to get exactly what I want but this was so helpful. I didn't know es6 had classes... that makes things easier

Hi and welcome to the GreenSock forums, Thanks for the demo it definitely helped to explain what you want to achieve. I don't have an easy or quick answer for you but perhaps some ideas that will trigger a solution from you or the other mods. The reason this is a bit of a challenge is because an animation records its starting and end values. Once you create an animation the engine remembers those values and interpolates between them. This makes it very easy to have runtime control over 1000s of animations (play, pause, restart, reverse, etc) with no impact on performance. The ModifiersPlugin is probably the first tool to reach for when you want mess with a tween while it is running. Its important to note that it does NOT record new start and end values, but it intercepts and changes values on every update to a tween. Please consult this demo from @OSUBlake that illustrates that you can resize the browser window while the animation is running and the box always moves to and from opposite corners without changing any start or end values in the tween Perhaps you can use a similar calculation / ratio based on the screen size to determine the amount of offset of your box. The ModifiersPlugin is not a members-only bonus plugin so it doesn't need a special URL for CodePen. To get the URL you can: look at any of our CodePen demos for the ModifiersPlugin and grab it Go to CDNJS for a list of all the plugins: https://cdnjs.com/libraries/gsap Click the "download" button on the homepage and then click "customize" https://greensock.com/?download=gsap-js However, like you suggested I think it may be a bit easier to: detect the change in window size with a media query record the current progress() of the tween create a new one and start it at the same progress() of the previous one. Its possible there is another way. @OSUblake has another approach using CSS vars. Its really cool and I suspect you could adapt it to your case

I'm not exactly sure what you need. It really helps to provide a reduced test case. If you want an animation to run different every time, I'd probably suggest a function that repeats a new tween for you like this:

Thanks Sahil, Its really become helpfull to me because i just understand these both are different platform for making animated application?.

Hey there rets85, I've been building ad banners for over a decade and it still butters my bread. You can see all my work on my now outdated website when you like: mediagarbage.com - just go to the portfolio and click on any of the ad tiles there you can see my work. I am fast, easy to communicate with, I use native methods and not plugins, and I am familiar with all the different media serving platforms like Doubleclick Studio and Sizmek etc. I currently handle all of the digital display work for Sotheby's International Realty globally as well as all of PBS programming domestically and in England. I really like the work you showed as an example and would be interested to take that project on. I already know pretty much how I would tackle it. I will email you directly about my quote. Thank you!

I think this should work for you. Happy tweening.

This is fixed here... http://codepen.io/swampthang/pen/QdEOjb The only difference? I removed the namespace declaration from the foreignObject element! So instead of... <foreignobject xmlns="http://www.w3.org/1999/xhtml" class="node" x="0" y="0" width="800" height="300"> I changed it to... <foreignobject class="node" x="0" y="0" width="800" height="300"> and it started working. Another important thing to note - I definitely needed the styles to be placed inside the SVG. Works in Firefox too. For some reason, I was under the impression that one has to add the xmlns namespace to the foreignObject to get it to work. Ironic. My little pea-brain.