Leaderboard

Hello @Oskar and Welcome to the GreenSock Forum! Here is a jQuery Plugin i made awhile back that takes an image, then slices it up, and uses GSAP to animate the sliced elements. In the following examples I slice an image automagically into div elements with the right background position on each slice to make the image look like one image. Then I use a staggerTo() and animate using x (translateX) and or y (translateY) axis with overflow hidden on the container to create that effect for you. It requires GSAP to run animation, its free to use as is. When i have more time i will account for responsive and other types of effects. Has various combination of options: number of tiles in x or y axis (horizontal or vertical tiles) duration stagger delay direction margin for grid wall metro type of look (spaces between each slice for metro grid) Happy Tweening

You can use scaleX instead of width for better performance.

You can also animate the white sliding elements, like this: (That demo has more stuff than is necessary for you, but it should be easy enough to understand what's going on)

Ya that was trickier than I expected because you are using flexbox. So the solution is going to be little more complex. In both click events I am first updating height and width and using the new boundingClientRect to calculate the difference between positions. Feel free to ask any questions if you have doubts with the demo. Also, Power1.easeOut is default ease on all tweens so you don't need to use explicitly. Update: I made some changes to the demo and wrote a function that will take two arguments, element which you wanna animate and target element to which you want to animate. Function will first change height and width to the height and width of target element, calculate the new position, reset element to original height and width and then return new position and dimensions.

I think this should work for you. Happy tweening.

I will just suggest you to search how google treats hidden text and content, some articles say they devalue the hidden content but from personal experience completely hidden links still get indexed. Personally, I hide everything using CSS and then I use another CSS file inside noscript tag to keep content accessible which should have some positive effect on SEO.

Yep, I believe @Sahil is correct. You're setting the resetDuration to true which is causing the issue in that demo. Once I changed that, it seemed to work (or did I miss something?) You can add a tween to a timeline anytime. It can pick up the animation from wherever you want - it's just a matter of aligning the playhead with the desired location. Remember, you can set a tween's startTime() to whatever you want. So, for example: newParentTimeline.add(tween, newParentTimeline.time() - tween.time()); There are several other options too, but I don't want to overwhelm you And you don't have to specifically remove() it from its old timeline because it can only exist in one place at a time anyway (it'll automatically be removed from the old parent). Does that help?

I went through your very first and last pens, in both demos you are explicitly setting updateTo's resetDuration parameter to true which causes animation to restart. If you leave it as it is (default is false) then you won't see animation restarting. If you are adding active tween into timeline then it does restart but none of your demos are adding active tween into timeline. And I am not sure if active tweens can be added to timeline without resetting ongoing animation.

Cool article! I love seeing SVGs that are made with code. Doing that animation with GSAP isn't too hard. I made a post about creating waves that does the same thing, but for a polyline/polygon. I don't have time right now, but I can show how to convert those demos to use that technique later.

No. PixiJS is a canvas/WebGL based library. It doesn't work with HTML. Maybe you should look at CSS filters. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Something like this? You can get position and dimension of element relative to viewport by using getBoundingClientRect method. A lot of your code can be reduced and simplified but I wasn't sure about exact effect you are looking for so I just made the change to button click. Also, you were using version 1.17.0 which is really old version of TweenMax, current version is 1.20.3.

okay okay thanks! Spans are usually inline but I changed it to inline-block and it worked fine. Thank you. I can also use divs but even then have to switch to inline-block if I want side by side or.. display flex with flex-direction row.. that will work too. Thank you! Hope you are having a great day!

Beautiful Thank you!

CSS inside noscript... Good idea. I never thought of that. Thanks.

No problem at all, @Sahil. Thanks for jumping in to help.

Ah it was too easy to figure out. I just didn't realize that I was working with two different elements and expected new tween to overwrite previous one which already completes before previous one can start. Thanks Jack.

@Sahil Yes, if I understand correctly, that's expected behavior. If it's invisible and you click twice quickly, you set it up so that the fade in doesn't start for 0.5 seconds, but the fade out starts immediately, thus part-way through the fade out, your fade in begins and it overwrites the fade out. Just a logic issue in the code, that's all. See what I mean? You could manually kill the old/outdated tween (which it sounds like you did) or you could use fromTo(), though that could be jarring if it happens in the middle of a fade.

That's pretty simple, just pass 'this' to function as target and keep track of last clicked element. I also noticed small issue where modal would get visible despite clicking on overlay when you click too quickly. I have fixed that by killing the ongoing tweens on modal. @GreenSock any other way to get around this behavior? Following is reduced case demo. If you fast click, at some point element will stay visible when it should be hidden.

Thanks buddy! That information fixed the issue. Couldn't find anything online about it. Hope this helps others who experience this issue. Congraz on all your success! I got some ideas up my sleeve... keep an eye out in the next 2 years

Very cool, @Jonathan Thanks for sharing!

FWIW... That is really well done. thx for the example

Thanks Jack. Yes I do see and tried this earlier in the process but it wasn't working. However loaded the two new files you used for TweenMax and GSDevTools and used .call(player, [mySound], this, position) on the masterTL and all is working!! Nearly finished my anim now and can't say how grateful I am. Thank you so much - I'm really sorry if I caused you guys a bunch of work. Buzz

Hey Thomas! Blast from the past. Good to hear from you. Happy tweening, my friend.

It sounds like there must be a "com" object defined in the global space that's not an object. For convenience, GSAP puts all of its classes in the reverse-domain standard of com.greensock (example: com.greensock.TweenMax, and com.greensock.easing.Power2). In other words, there must be something else that's declared "com" as something else like: var com = 'firstname|lastname|username|email|emailaddress|ssn'; So when GSAP tries to add "greensock" to that object, it's throwing an error. Possible solutions: Name that variable differently (anything but "com"). -OR- try declaring a GreenSockGlobals object before loading GSAP, like var GreenSockGlobals = {}; because GSAP looks for that and if it finds one declared, that's where it'll dump everything. -OR- Right before loading GSAP, re-declare that variable as something else, like com = {};. This assumes you don't need that old com stuff after that point. You could always store it in a different variable, redeclare it, load GSAP, and re-assign it back to the "com" variable after that (I doubt you'll need to do that). Hope that helps.

The performance of filters used to be pretty bad, but browsers have since optimized most of their usage. If you notice performance is an issue, try adding will-change to your CSS. I was messing with a complicated blurring filter yesterday, and adding that made it run much faster. will-change: filter;

@bromel Doesn't your last thread contain multiple pens with working scrubber? Just curious if you came across any issues because scrubber in each example work fine for me.

I don't think there's any question that something odd is happening on the live site. As Jack mentioned, since it works fine on CodePen there has to be something else interfering. This doesn't appear to be any problem with GSAP. It does seem like some sort of sizing or transform-origin issue. I tried looking at your live site, but there are just too many scripts loading and without editable code, its so difficult to debug. I'd recommend starting with the code from the demo and just keep adding scripts, styles and functionality until the behavior appears. If you could make it happen in a simplified CodePen, we should be able to point you in the right direction. Happy bug hunting.

Thanks for the kind words. Yeah, I think this community here is something really unique that makes GSAP even more special and trustworthy in a world of [seemingly] unending open source options littering the web (many of which are poorly supported). Very cool to hear that the timely responses boost your confidence. I'm looking forward to seeing the article you write. Please let us know when it's live. As for controlling sound events from a timeline, it should be as simple as dropping a call() into a timeline wherever you want a sound triggered. No need to fumble around with a bunch of setTimeout() calls (which wouldn't be synchronized with the GSAP timeline, like if you ever scrubbed the playhead or made it jump elsewhere). See what I mean? Let us know if you have any other questions. Happy to help.

There are just too many variables and too much code to effectively troubleshoot your live site. We really need a reduced test case in something like codepen. If you can't reproduce it there, it seems like you must have something else interfering on the live site (a different library? Some rogue code that affects the transform-origin? Not sure). I wish I had time to do custom troubleshooting on live sites like this; perhaps someone else does.

Hi and welcome to the GreenSock forums, To create that slice effect without Canvas or SVG people usually create a bunch of divs that use the same background image with different placement. check out this demo here: @romain.gr wrote the script for doing the slicing. full thread: and here is another by legendary forum ninja @Rodrigo I would suggest geting the animation you want it first and learning the basics of GSAP first. Then you can look into a library like Scrollmagic to trigger animations on scroll : http://scrollmagic.io/

Guys, Firstly, I was deeply impressed/grateful when Carl posted back on a Saturday! But now I see Jacks post from yesterday - can I just say here I think your commitment to an already great product is outstanding, you gentlemen are totally invested in GSAP and it allows guys like me to say "yes, we'll depend on this library". I think of you now as brothers in arms - when we launch our new site we'll be doing an article on GSAP. Ok, I'm going to grab the updated TweenMax and try it on my dev pen and see how it goes. I am still struggling with timing from the aspect of just using the timeline to control sound events. Using a simple patch for now with a setTimeout inside the sound function to allow me to pass a unique time variable to control deployment - not ideal obviously, particularly as any changes to the timeline will mean individual changes to those times which defeats the great power of the dev tools to control the tl! I've updated the pen so you can see what I'm aiming at. Again, if I'm being exceptionally dense feel free to humble me. Meanwhile, massive thumbs (socks) up for the Green Team. You rock. Buzz

Hi @gmgurgen Welcome to the forum. I'm not quite sure what's happening there, but I do see the behavior that you mentioned in Chrome. (I'm also seeing the odd behavior in Edge). Strangely, your CodePen demo works perfectly in all browsers. Since that is the case, there has to be something different between the demo and your live site. Have you tried stripping down the live site to the same level as the demo and adding things back until that odd behavior occurs? Just a thought. I don't really have any other answers as it's hard to debug a live site. Maybe someone else sees something that I'm missing. Happy tweening.

Hi @flash08 I'm not sure, but I think you're asking how far along the x axis to place those other divs so they're off the screen at the beginning of the anmation? If that's the question, you could just check the width like this: var ww = window.innerWidth; Then just use that value in your tweens instead of your hard coded 960px. Hopefully that helps. Happy tweening.

Brilliant work dude!!! I've been working on the solution myself but hadn't got this far... wow. Thank you so much for taking the time to help out

I would agree with Dipscom that React or a similar framework is best suited for this type of thing. I don't think animating between page linking would get you a smooth solution. It can also be achieved with all the content hardcoded on a single page. I did it this way on this site: http://www.questbrands.ca/betterbarriers Everything is basically handled by GSAP. Note that this way it's very important you devise a workable lazy loading technique so that everything doesn't need to be loaded at once and preferably assets that are never viewed don't get loaded at all. Look into jquery load() as well, very easy content loading solution that might help you progressively build a page. If you've ever used Foundation it also has an AJAX loader called Interchange that is pretty easy to use.

With a little bit of math we can actually apply a wave to a curved surface Sawtooth version...

Somewhat related. Here's how you can use that same technique to animate a rope mesh in Pixi.js. Stuffed Tentacles

EDIT: Notice that a flicker may appear in some of these demos. This a hardware acceleration bug Chrome. You don't need any smoke and mirrors for this. You can create circular motion using Sine.easeInOut, and circular motion is a wave... Look what happens when you plot the x and y values separately. Beautiful waves! Here's how you can do that with SVG. I'm just animating a bunch of SVGPoints on a polyline that are set to slightly different progress values. The amplitude is the height of the wave. The frequency is the distance between waves. And the number of segments is how many points will be added to the polyline. You don't want too many as that can make your animation run slower. Just enough so it looks smooth. You can animate the amplitude and frequency by applying an ease to them. Every ease has a .getRatio() method, which you can use to get the easing value. So if you wanted to animate the amplitude, you could do something like this... point.y = amplitude / 2 * Power1.easeIn.getRatio(norm); To make things interesting, I wanted to test out the CustomEase tool that's going to be coming out soon. I came up with a simple ease that looks like a bell curve, so it starts and ends at 0. Here's how that looks when applied to the amplitude. You can also apply an ease to the frequency/progress value, and even change the shape of the wave. If you reverse your animations, the smooth wave connection gets flipped, creating a pretty interesting sawtooth wave. Related post with other rendering options...