Ihatetomatoes

Hi Fernando, you have to target the individual paths inside of the SVG instead of the SVG itself.
 
Here is the updated CodePen:
 

See the Pen e3d7fc0fcc29b80c115fc7e6d4be97a3 by ihatetomatoes (@ihatetomatoes) on CodePen
 
Also note that I have set the TO value to be "100%" instead of 100, because the length of each letter is different.
 
100% will always animate the path to the full length.
 
Hope that helps.

Here is the scene with the reverse set to false:
 

See the Pen c81e9f7f2acb87c26f856e1f75212f29 by ihatetomatoes (@ihatetomatoes) on CodePen
 
Sounds like you have to create two scenes, one will trigger the animation + scrollTo and one that will only trigger the animation.

Hi Beck, 
great to see you are implementing GreenSock into a real life project.
 
TYPO
 
After quickly looking at your code, I realised that you have misspelled transformOrigin for transformOrgin, that is why your transforms are not behaving the way you want.
 
You will need to fix the typo and set the default value for the #top to be the bottom of the element, currently it is set to '0% 0%' which is the top of it.
 
Also remember, once you change transform origin on an element, you don't have to declare it again on the future tweens, unless you want to change it. In your case you should set it to "100% 100%" in the clearTl function and that's it.
 

See the Pen 4dae4dfd0fafc9fa970ef251a3105e27 by ihatetomatoes (@ihatetomatoes) on CodePen
 
TIMING
My suggestion is to tweak the timing of your animations, at the moment it feels like the whole graph is animating in for too long.
 
In high level I would start by animating 3 groups of elements:
the graph axis with labels the TIMES PAST and POWERTOOLS arrow the text This might be harder to explain, but one thing that helps me when creating the animation flow is to animate elements that my eyes are looking at, followed by elements near by.
 
In your case when the TIMES PAST animates then the TEXT animates, which is quite far from the previous element that my attention was drawn to. 
 
I really think that you only have to tweak to a few things to make this graph stand out even more.
 
Hope that helps Beck and thanks again for signing up.
 
Cheers
Petr

Hi Richard, here is the promised video:
 

 
Let me know if you have any other questions, hope it helps.
 
Cheers
Petr

Hi Alvaro, great to see you experimenting with GSAP.
 
Which of my tutorials have you followed?
 
I've only quickly looked at your code and see a few errors:
function goToTile(sildeIn, slideOut) // should be slideIn, also you have tl twice in that function // also I would include var in front of slideIn var slideIn = ... My suspicion is that the way you are passing the slideIn into the goToTile function is returning wrong object on a second click.
 
Try to console log this and see if it returns the right object all the time:
slideIn = slideOut.parent().children('.view').eq(index); Sorry I couldn't help more atm, but I hope it steers you into the right direction.

Hi idarfan,
I've created a CodePen showing you a few options - 
See the Pen 1462ef622d1488e3c956bbdddb6f39fb by ihatetomatoes (@ihatetomatoes) on CodePen
 
As MindGamer mentioned, your TweenMax staggerTo and staggerFrom tweens are running at the same time, giving you the wrong result.
 
The best way would be to use a timeline:
// Timeline controlling boxes up/down var tl = new TimelineMax(); tl.staggerTo(".box", 2, {rotation:360, y:300}, 0.5) .staggerTo(".box", 2, {rotation:0, y:0}, 0.5); By default the starting position of the elements is the position defined in the stylesheet. In other words if you would want to swap the order of your animations, you could use something like this:
// Timeline controlling boxes down/up var tl = new TimelineMax(); tl.staggerFrom(".box", 2, {rotation:360, y:300}, 0.5) .staggerTo(".box", 2, {rotation:360, y:300}, 0.5); Explore the code in the CodePen, I've commented out some of the code snippets.
 
Cheers
Petr

And if you want to stop the repeating tweens at a certain point, you can add onComplete callback function to the tween that should stop it. Eg.:
tl.to("#road", 6, {left:-1456, onComplete: stopFunction}, "start"); function stopFunction(){ //stop some other tweens } Hope that helps.

Hi Chris, this might be tricky without the restructuring the html. The one thing is to add clearProps: 'all' to your tween, that will keep the button on top after the animation is completed.
TweenMax.to("#containerDiv", 1, {rotation:"+=360", clearProps: 'all'});
See the Pen 019f7be746259e452b71d568c98ed5c5 by ihatetomatoes (@ihatetomatoes) on CodePen
 
You are probably trying to keep it at the top even during the animation, I don't think there is a quick solution for this, unless you restructure the html.
 
Is there any reason why you can't create a simple html with 3 separate layers to achieve this effect?

Good questions Chris, I had a similar issues, but there is a workaround.
 
More here:
http://greensock.com/forums/topic/11369-gsap-globals-for-jshint/

Hi grantambrose,
this is a quite common issue when animating elements on page load.
 
Your approach with hiding body by default using inline CSS is the right one.
 
I would suggest adding a class to the body instead of the inline styles and then remove this class using the .set() method.
<body class="loading"> ... </body> body { transition: all 0.3s linear; } .loading { opacity: 0; visibility: hidden; } TweenMax.set($('body'), {className: '-=loading'}); You can use the CSS3 transition inside of the body to define the right fading duration.
 
If you are concerned about the users without JS not being able to see anything, then you can use modernizr class .no-js and turn the visibility and opacity on like this:
.no-js .loading { opacity: 1; visibility: visible; } Just wanted to share my approach, that you might find useful.
 
Cheers
Petr
@ihatetomatoes

Hi Thomas, have you tried to split your SVG animation into two timelines or tweens and have two ScrollMagic scenes?
 
Each scene would then trigger and animate only half of your complete timeline eg:
 
1. Scene 1 would animate the SVG from 0 to 50%
2. Pause
3. Scene 2 would animate the SVG from 50% to 100%
 
You can define the length of the pause by setting a right offset to the Scene 2.
 
Hope that helps.