Leaderboard

I've never needed to do that nor do I know if there may be a better way, but this should work. slideAnimation.push(window["slideTL" + i]);

Welcome to the forums, Thanks for the demo, and congrats on getting it pretty close to what you needed. The tricky thing here is that when you are dragging you are using "x,y" but you are using offset() to determine the natural position of the elements on the page which returns left and top. Of course, only after finishing the demo did I consider switching the draggable type to "left,top". That may save some trouble, but I'm not sure. Anyway one component of this challenge is that in order to animate the elements back to their "normal" or start position you need to remember what that is. I store a startPos object on each element with draggables.each(function(index, element){ element.startPos = $(element).offset(); console.log(element.startPos) }) When I detect that the dragged element is in the "dropzone" I use this calculation to tween it to the dropzone. Its important to figure out the action targets offset minus the draggable's offset. We also need to zero out the x and y as they have changed while dragging TweenLite.to(this.target, 0.3, { left: (actionTarget.offset().left - this.target.startPos.left), top: (actionTarget.offset().top - this.target.startPos.top), x:0, y:0, scale:0.8, }); I'm changing the scale as it allows us to still see the active yellow border of the dropzone. When you detect that the dragged item is NOT in the dropzone, we send it back home using: TweenLite.to(this.target, 1, {x: 0, left:0, y: 0, top:0, scale:1}); I don't know if dragging using "x,y" performs so much better than "left,top" that its worth the hassle tweening and resetting both x, y, left and top in each tween. As I suspected (too late) if you just switch the Draggable type to "left, top", it will work fine and you don't have to worry about x and y. IMPORTANT The functionality for both demos works fine at any screen size and the boxes can be in one row or multiple rows. However, if you resize the window and change the flow AFTER the page loads it will get entirely messed up as you are changing the relative offsets of the draggables start positions and drop zone. If resizing is important to you, you may want to look into another approach, like FLIP (first, last, invert, play). This technique, although not using those terms, is described by @OSUblake here: You can also Google Flip Animations and probably find a lot about how the technique is used with other animation engines, but the core principles of how it works remain the same regardless of animation engine. https://aerotwist.com/blog/flip-your-animations/ The basic idea is that since you are changing the flow of the document, you need to figure out where elements should go based on that new flow. You can only determine that if you place your elements where they should be before you animate them to there. Hopefully the demos above get you closer to what you need as the main calculations and hooks are in place.

Hi @Salmen Welcome to the forum. I don't know why you couldn't have a carousel move diagonally. You'd just animate the +x and -y of each slide. There would be a variety of ways to set it up. Maybe a parent div with overflow:hidden or you could use a mask/clip-path. However you set it up, GSAP will animate the values perfectly for you. For more detailed answers, you can create a demo. More info about that: Happy tweening.

The word React is like the Bat-Signal for @Rodrigo. If we need him, perhaps we just fire up the Rodrigo-React-Signal.

Oh that is different than I was picturing. You said carousel so my mind went elsewhere. We had a similar question a few months ago. @Sahil has a nice solution in this thread. Happy tweening.

Looks like Carl's Coding College is in session today. Nicely done @Carl.

Thank you @Carl! You are my green socked hero!

Hi Salmen, Welcome. Like PointC said, a demo would really help as their are many ways to interpret "a diagonal transition". Are the images moving diagonally? Is it a mask-reveal that is on an angle? Also without a demo of some of the HTML/CSS structure, its hard to know what type of answer you are looking for. Do you want us just to explain some basic concepts or are you expecting us to build it for you from the ground up? I'm sure we can help you with some of this, but we do have to keep support very focused on the GreenSock API, so whatever you can do to help us provide a clear and focused answer will really help. My suggestion would be to first provide a basic demo of 2 images so that we can better understand what you mean by the diagonal transition. Thanks

Thanks for the demo. The main problem is that in order to use CustomEase you must load the CustomEase.min.js file. I added it to your CodePen and it works now https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js This page here explains how to get all the URLs of the bonus plugins to use on CodePen: https://greensock.com/try-plugins If you want your second TweenMax animation to wait until the first animation is done playing, you will need to add a delay TweenLite.to( "#img2", 2.5, {ease:CustomEase.create("custom", "M0,0,C0.127,0.382,0.284,0.674,0.444,0.822,0.638,1.002,0.961,0,1,0"),y: -500, delay:3}); For building sequences, we recommend using Timelines. Definitely check out: https://greensock.com/get-started-js https://greensock.com/timelinelite If you don't want to see #img2 until it animates up and down, you will need to also set its opacity to 0 or visiblity:hidden somewhere in your css and then make it visible in your animation code.

Hi @PointC, Your pen inspired me: Randomized animation due to different timings. Kind regards Mikel

Thanks a lot. I am just trying. I found following video tutorial. Very intresting. This will solve the Problem. Many Thanks to all. @determin1st: I mean that the images should be shown from the beginning. At Present the image was ease in from top left. Thanks

Hi @gsmas Try transformOrigin:"center" ... Here a good example to understand the transformOrigin: Happy tweening ... Mikel

If you not comfortable attempting to build this yourself you can also look at fullpage.js https://alvarotrigo.com/fullPage/ It's a pretty good solution for bridging the gap until you are capable of handling this type of thing yourself. On the downside it completely scroll jacks the dom and forces you to work within it's requirements but on the upside it has a fairly robust set of callbacks allowing you to plugin your own animations, and a lot of options.

You were using really old version of TweenMax. Current version is 2.0.1

Hi @sheila Welcome to the forum. You can certainly animate a path as a mask. There is no 'r' attribute for a path though. That's the radius of the circle. You could morph it to a different shape, scale or rotate it no problem. Here's a fork of your demo with a scale animation. Does that help? Happy tweening.

Hello kkarimi91 It will be hard to debug or see whats going on just by that code snippet alone. Are you loading TweenMax.min.js before other scripts? Are you also using TweenLite and not loading the GSAP ScrollToPlugin file? What order are you loading TweenMax in? make sure your not calling it before you load and call TweenMax.min.js To better help you, can you please provide a codpen demo example so we can see your code in context. And see how and in what order you might be loading your code? Thanks!

That's what I always do when I need a bunch of timelines. Loop, create and push them into the array.

you could also use eval() var var1 = "pancakes"; console.log(eval("var" + 1)); However, people say eval() is bad. In cases where I need to do things like you are doing I usually just push the thing (in this case your timeline) into an array as soon as its created and then just grab it by its index in the array.

Is this what you need @gsmas ? Hopefully that helps. Happy tweening.

Dear Carl, Many Thanks for your explaination. I donot see any changes in the Codepen. The #imge2 remain the same. No animation on image2. Normally it will cover the whole area and come to its original size. I have click on the codepen. Which codepen have you changed. I have added the CustomEase.min.js file in my document but nothing happend. Thanks a lot.

Ha! I'm the same way with SVG or mask related questions. I can't resist and start drooling. ? Blake will almost always appear when canvas and/or Pixi are mentioned in a thread. Everyone does seem to have their strong areas and favorites. Now if I can just get a PointC-SVG-Signal to show in the sky outside my window, I'd be all set.

Hi @OxXxigen did you consider using Cross Document Messaging to emit whatever data you want from draggable to be shared between the page and the iFrame? I think you can use Draggable in whatever place you need, track the necessary information and pass it as a message down to whoever needs to react to it. Never done it myself but from what I understand of the theory, it should be possible. https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Ever heard of conditioning?? this guy has all the answers https://en.wikipedia.org/wiki/Ivan_Pavlov EDIT: I didn't saw the Bugs Bunny shape there!!!! You deserve like 500 likes for that!!!

Hi Gilbert and welcome to the GreenSock forums. First try to avoid string refs, they are deprecated since React 15.x. Use the ref callback instead: https://reactjs.org/docs/refs-and-the-dom.html In the constructor create an empty array to add the elements as you call the render title method: // this is inside the component's class constructor(){ super(); // just an empty array, we'll use the ref callback to add the DOM elements this.titles = []; // the rest of your constructor code here } Then, IMHO I don't see the need for two methods to render each title, you can run all your logic in just one and use the ref callback to add the element to the array, like that you'll have a predictable way to add your elements to the timeline. renderTitle(e) { const ATitle = titles[e.component]; return( <div className="box" key={e.component} ref={e => this.titles.push(e)} > <ATitle size={e.size} text1={e.title} text2={e.subTitle} open="false" style={{ position: "absolute", x: " +e.x+" , y: " +e.x+", "fill": "orange" }} onComplete={this.handleComplete} /> </div> ) } The key is the ref callback which has the DOM node as the argument, then the DOM node is added to the titles array. Then you can access the titles array and create your timeline: componentDidMount(){ const { tl, titles } = this; titles.forEach( (e,i) => { tl.to( this.refs[e.component], 1, {x: e.size, y: e.size/3 , scale: 0.5, opacity: 0.5}, .5 * i ); }); tl.reverse(); } This is a better and more actual approach to write your app. Now to the sequencing part of your app. I'm a bit puzzled, because react-titles does creates either a GSAP instance or uses react-motion for the animations. If you want to control those animations, you'll have to fork the repo and create an API that exposes some way to do what you need, because react-titles starts as soon as the component is mounted. For the initial position, what I saw in the repo is that the code uses fromTo instances, which create an immediate render, which sets the initial position of the elements being animated, so no matter what you do react-title will enforce those initial values passed in the props of the component's instance. Such is the nature of re-usable React components, you have to work with whatever the creator of the component is giving you. Also keep in mind that the open prop passed to the component is a boolean and you're passing a string "false". Try using a boolean instead: <ATitle size={e.size} text1={e.title} text2={e.subTitle} open={false} style={{ position: "absolute", x: " +e.x+" , y: " +e.x+", "fill": "orange" }} onComplete={this.handleComplete} /> Another option is hack into the code of react-titles and create a way to control the animations. Honestly if I was you, I'd take the animations being created by react-titles and bake my own solution for the particular needs of the project. The GSAP code in react-titles is good and there are no issues there and unfortunately we can't spend a lot of time figuring out how GSAP based tools work and how they're used. I saw that you started an issue in the repo, hopefully the creator(s) of the tool can help you more than I can and they can add a way to keep the tweens paused when mounting and give more control over them, as well as creating more complex sequences. Happy Tweening!!!

CodePen is a haven for that sort of examples. You can find anything you can think of and a bunch of other stuff you didn't even think yourself. Here's a quick search result: https://codepen.io/search/pens?q=scroll reveal&amp;page=1&amp;order=popularity&amp;depth=everything&amp;show_forks=false Disclaimer: We don't work for CodePen, we don't get commission from them. They're just a bunch of super nice developers who created a lovely comunity and a great product. Sounds very much like GSAP, you say? :D

If you want to turn off that feature altogether, just pass in zIndexBoost:false. If you want it to be boosted while dragging but then you want to alter it to something else afterward, you could do so in an onRelease: Draggable.create("#yourID", { onRelease:function() { TweenLite.set(this.target, {zIndex:0}); } }); Or just use raw JS to remove the inline style altogether. Totally up to you. Enjoy!

Sounds like maybe you just forgot to load the ScrollToPlugin file? If not, I'd echo Jonathan's request for a codepen demo so we can poke around and see what's going on.

No, there aren't any built-in functions for determining that, but you can certainly discern it by comparing the current x/y with the previous x/y. I'm not sure if you're trying to figure out the direction since the start of the drag (total delta) or the moment-by-moment velocity, but here's a demo that shows both: http://codepen.io/GreenSock/pen/zyxgh?editors=001 Notice that if you have ThrowPropsPlugin, you can get the current velocity of any property that it's tracking (and Draggable automatically turns on velocity tracking for whatever properties it's controlling), so I use those values in a simple formula. The nice thing about the ThrowPropsPlugin velocity tracking is that it uses some algorithms to more accurately discern things without getting tripped up by some funky variations that you'd likely stumble on if you were only comparing the current x/y to the previous one, depending how frequently the mousemove/touchmove is firing. If you don't like either of those solutions, something like Hammer.js might help (I've never used it, but I thought I heard that it does this sort of thing).