Leaderboard

Hi and welcome to the GreenSock forums. What you can do here is create 1 tween that animates the object from left to right across the full width of the screen. Then jump to the middle of the tween by setting progress(0.5). In the demo below I paused the tween at a progress(0.5) so you can see the box in the middle. Clicking on the document plays the tween. The pausing is optional you could just set the progress immediately and have it play from there. var t = TweenMax.fromTo(".green", 1, {x:-50}, {x:400, ease:Linear.easeNone, repeat:-1}); t.progress(0.5).pause(); document.onclick=function() { t.play(); }

Hey @ideagonal! I think you are answering your own question here. See where you state that you want the element to 'move from a relative point' - That's what you need to do in order to have the boxes move relative to their current position. It would be something like: TweenMax.from(classe1, 1, {y:'-=20'}); You don't even need transformOrigin. Here's a fork of your pen with an alternative way of setting your tween up:

Hi @mikel By scroll jacking, I'm talking about interrupting or changing the native scroll bar behavior. Much like this demo screws with your mouse. I'm not against scrolling animations or parallaxing. Quite the opposite. I actually do a lot of that stuff... but with my own scroll magic. Look at the demo Jonathan posted above. There's actually no content being scrolled, yet the scroll bar behaves normally, even with touch. If you need to do scroll jacking, just hide the scroll bar. You can get the effect you want, but without messing with user expectations. That's what a lot of the apps on GSAP's and Pixi's showcase pages do, most of which have won some type of award. A couple of the first ones I came across. Some really nice stuff! https://www.rainforestfoods.com/experience/#!/slide-intro http://jetlag.photos/ http://truthlabs.com https://moments.epic.net http://masterdigitaldesign.com/#the-master

Hi @Mast3rmind Welcome to the forum. The problem is CSS related. You're setting all your elements backgrounds to black so the nav-bar is over the top of the logo and title and they appear to fade a second time. You can either remove the black background on line 7 of your CSS or set the nav-bar background to transparent. Either method will fix your problem. Happy tweening.

Step 4 Create a fadeInOut animation with the same timing as the movement tween. Since I need a single tween that starts at opacity:0 goes to opacity:1 and then back to opacity:0 I decided to create a customEase. In order to understand this step, you must first completely understand how an ease works. I decided to use an ease that looks like this: you'll notice it stays stuck at max value for a little bit (flat part up top). I also tried a more linear ease like: They are both in my final CodePen as: CustomEase.create("quickPulse", "M0,0 C0,0 0.231,0.062 0.358,0.3 0.497,0.561 0.472,1 0.472,1 0.472,1 0.536,1 0.536,1 0.536,1 0.542,0.514 0.642,0.302 0.735,0.101 1,0 1,0"); CustomEase.create("linear", "M0,0 C0,0 0.073,0.162 0.2,0.4 0.339,0.661 0.5,1 0.5,1 0.5,1 0.663,0.666 0.796,0.382 0.889,0.181 1,0 1,0"); You can definitely get some wild effects by just playing with the ease. i would probably round off the top of my quickPulse (ease 1) just to smooth it out a little. I added the opacity tween at the same time like so: $("text").each(function(index,element){ master.to(element, duration, {y:-475, ease:Linear.easeNone, repeat:-1, repeatDelay:(wordTimeOffset * numTexts) - duration}, index * wordTimeOffset); master.from(element, duration, {opacity:0, ease:"quickPulse", repeat:-1, repeatDelay:(wordTimeOffset * numTexts) - duration}, index * wordTimeOffset) }); feel free to change ease:"quickPulse" to ease:"linear" to see the difference.

Step 2: Make each word animate directly after the previous word (so it appears they are all animating as a group). In step1 there is a big time gap between the first word animating and the second word animating. I want each word to follow its predecessor at exactly the right time. I want word1 to start animating as soon as word0 gets into the yellow border of the svg. I know that each word is 75px tall so I just need to know how long it will take word0 to travel 75px up. I know my pixelsPerSecond speed and how tall each word is so I can calculate myWordTimeOffset as follows: var pixelsPerSecond = 300 var wordHeight = 75; var wordTimeOffset = wordHeight / pixelsPerSecond; That calculation tells me that the second word needs to start 0.75 seconds after the first word. Likewise the third word needs to have the same offset after the second word. We can use the index of the loop and wordTimeOffset to dynamically set the absolute position of each animation in the timeline like so: $("text").each(function(index,element){ master.to(element, duration, {y:-475, ease:Linear.easeNone}, index * wordTimeOffset) }); Yielding the following result which makes it look like a single list is animating at once:

It would take quite a bit of time to explain this properly, but I'll break down some of the steps STEP 1: Animate each word We know that we want multiple words animating from bottom to top. I know the svg is 400px tall and each word is 75px tall. Putting the wheel-container element at a position of 475 places the top of each word directly below the bottom border TweenLite.set(".wheel-container", {y:475}); The container is moved down and each word still has its own y value of 0 (i removed your y attributes in the html). To make each word go up to the top of the stage I have to move -475 px. I use a jQuery each() loop to add a tween for each word into a timeline $("text").each(function(index,element){ master.to(element, duration, {y:-475, ease:Linear.easeNone}) }); I use the following variables to figure out the duration of each tween based on the distance each word needs to travel and the speed var pixelsPerSecond = 300; var distance = 475; var duration = distance / pixelsPerSecond; Having a linear, constant rate of motion is very important for step 2. For now step 1 does this:

Thank you. It solved the problem.

Thanks, Craig. I had to do something to up my game once @OSUblake started creating "6-part tutorials as answers"

Wow Carl - talk about going above and beyond for the community. Nice! You should leave a tip jar out on the counter for that level of detailed explanation. Just one of the many reasons why GreenSock rocks.

That's fantastic with the array functionality. Worked like a charm and very smooth transitions. this library rocks.

Step 3: Make it loop The issue with step 2 is that it only plays through once. We need the first word to comeback up from the bottom 0.75 after the last word starts animating. So we need to find the proper repeatDelay. This was a bit tricky and I came up with this: repeatDelay:(wordTimeOffset * numTexts) - duration I really can't explain that without walking you through a visual timeline like that found in Animate CC, so you'll just have to trust that it works when used like this: $("text").each(function(index,element){ master.to(element, duration, {y:-475, ease:Linear.easeNone, repeat:-1, repeatDelay:(wordTimeOffset * numTexts) - duration}, index * wordTimeOffset); }); you can see the infinite repeat with the proper repeatDelay here: Now that we have all words animation at the same rate with the right repeat, the next step is just to create another tween that fades the words in and out as they move.

Hey @ideagonal, well you have been graced by an appearance of the MIGHTTTTY GREENSOCK in his digital self! Fills me with pride to say he said what I was going to say (no hindsight bias here, honest. )! Anyhow, as Jack has said. If you can provide us with a reduced case scenario, we will be able to help you. What yo are trying to achieve is possible and not complicated, it might just be a case of naming the correct groups and organising your SVG in a different way.

Howdy, @ideagonal. Welcome to the forums. Any chance you could post your SVG? It's kinda tough to discern what's going on without seeing that. I want to see how exactly those elements are positioned originally (using transforms? attributes? Do they start all the way up at the top?) Better yet, if you could provide a reduced test case as a codepen, it'd be amazing.

Thanks for the demo. I'll admit it was more of a challenge than I first thought and I spent some time with some approaches that didn't quite work out. The good news is I got it down to about 2 lines of code: $("text").each(function(index,element){ master.to(element, duration, {y:-475, ease:Linear.easeNone, repeat:-1, repeatDelay:(wordTimeOffset * numTexts) - duration}, index * wordTimeOffset) master.from(element, duration, {opacity:0, ease:"quickPulse", repeat:-1, repeatDelay:(wordTimeOffset * numTexts) - duration}, index * wordTimeOffset) }); The basic idea is that there are 2 repeating animations for each element: First animation moves the element from below the svg to above the svg The second animation fades the element in and then out. I use a CustomEase for the fade that looks like this: https://greensock.com/ease-visualizer?CustomEase=M0,0 C0,0 0.231,0.062 0.358,0.3 0.497,0.561 0.472,1 0.472,1 0.472,1 0.536,1 0.536,1 0.536,1 0.542,0.514 0.642,0.302 0.735,0.101 1,0 1,0 The tricky part was figuring out how to make it group of animations repeat at the right time (repeatDelay). Basically I needed the first word to repeat as soon as the last word started moving. You can change the speed by messing with the pixelsPerSecond variable. You should be able to add more words just by copying and pasting in the svg. Also try changing the ease to ease:"linear" on the opacity tween for a different fade effect. I think I would next use a variable-transparency gradient mask instead of fading each word in and out. Something to perhaps experiment with at a later date.

Well, I think i answered my on problem. Was it because I had the incorrect scaleMode set (proportionalInside vs proportionalOutside)??

Yep, that's it! And so bad for me it's in the GSAP docs: I should know better RTFM! Thanks for your help.

Hi Carl, Thanks for the welcome! This is perfect! Solved what I was trying to do. Cheers!

Carl - superb! You're the man. Thanks for the quick response and reference. Always a pleasure.

Hi @jnalvit That's a pretty impressive looking site. Very nice! Angular has a lot of issues when it comes to animations. One performance gotcha in Angular is just running an animation. GSAP uses requestAnimationFrame, which is a browser event that automatically runs inside the Angular Zone. Once handled, Angular will perform change detection, calling ngAfterViewChecked, which may happen up to 60 times per second. I don't know if this will improve anything, but if you're not animating a property on your component, you should set that animation up to run outside Angular. constructor(private ngZone: NgZone) {} ngOnInit() { this.ngZone.runOutsideAngular(() => { // setup your animations to run outside Angular }); } But I think most of your performance problems are related to your CSS. This is very bad. img { will-change: transform!important; } That's causing Firefox to run out of memory because you're creating too many rendering layers. Once you go over that limit, Firefox cancels all the will-change optimizations. The only time I would recommend using will-change is for certain scaling animations. Check out this thread. Dealing with will-change in Chrome has been issue for the past year... https://greensock.com/will-change If you want to move something onto it's own rendering layer, you can set force3D to true. // You only have to call force3D on an element once TweenLite.set(foo, { force3D: true }) Another problem I see in your CSS is that you have transitions set to all. This is going to cause GSAP and CSS to fight over the animation. You need to be specific about which properties you want transitions on, and make sure you're not animating the same property with GSAP. .wrapper { transition: all .35s cubic-bezier(.215,.61,.355,1); }

This should help:

Good suggestion, @Dipscom. @Alexli, there was indeed a bug in the prerelease of Draggable, and I updated it now so things should be resolved (you may need to clear your cache). Does it work better now? (feel free to answer in a new thread that you create). https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

Glad you found a solution. By the way, are you familiar with what DirectionalRotationPlugin offers? https://greensock.com/docs/#/HTML5/GSAP/Plugins/DirectionalRotationPlugin/ It's actually baked into CSSPlugin too, so you should be able to just say rotation:"0_ccw" if you want it to rotate back to 0 in the counter-clockwise direction. Just an option Have fun!

Thanks Guys for your awesome help. Now my issue is using the scroll bar. Mouse scroll runs smoothly but with using the scroll bar no smooth effect at all.

Definitions are how TypeScript understands libraries that aren't written in TypeScript. Angular2 is written in TypeScript, so you don't need definitions for it. GSAP isn't, so TypeScript needs definitions to understand the types used by GSAP. There's a whole repo for these definitions, and there's one for GSAP (although it's not an official one)... https://github.com/DefinitelyTyped/DefinitelyTyped Just search around the internet. Installing definitions is very common as pretty much everybody has to do it, so there are a lot of resources. In fact, I wrote about installing definitions here for VS Code, although it might be a little out of date... https://greensock.com/forums/topic/13575-code-hinting-for-gsap-products/?p=56801 .

This isn't an Angular issue. The problem is related to modules. If you are trying to import every GSAP class individually, you might want to check out this thread from a couple of days ago. http://greensock.com/forums/topic/13441-greensock-tweenlitetweenmax-exported-globals-with-commonjs-module/ All GSAP classes are global, so with SystemJS you could register GSAP like this... System.set("gsap", System.newModule({ "default": window.com.greensock })); And then to use GSAP, you can just import it like this... import {Component} from 'angular2/core'; import "gsap"; I don't know how use Angular2 yet, so I wasn't sure how to access the element, but you can see it working in the console. http://plnkr.co/edit/0IK064Hrr0vuV6OM3DpI?p=preview

Hi and welcome to the GreenSock forums. Sorry, our TextPlugin is currently designed only to handle animating plain text chars. Unfortunately, its not something we can accommodate quickly. It's certainly a valid feature request and perhaps something we'll be able add in the future. Thanks for asking.