Carl

Yeah, like Rodrigo I'm not really familiar with creating SVGs with code which makes it even harder to grasp how that code should work without seeing it running at all.
 
One thing to keep in mind though, is that GSAP can tween any numeric property of any JavaScript object. So even if GSAP doesn't natively tween "the arc of an SVG" you can tween some number and then apply it to your arc-drawing function.
 
For a practical example, GSAP does not animate webkit css filters, but you can tween a value of a proxy object and then apply that value to the filter.
Check out the tween and onUpdate function in this demo to see how it can work: http://codepen.io/anon/pen/psEJa?editors=001

You can yoyo a tween that uses ScrollToPlugin
TweenMax.to(window, 2, {scrollTo:{x:2000}, yoyo:true, repeat:20}); http://codepen.io/GreenSock/pen/cxtzL
 
I'm guessing you may have put the yoyo and repeat props in the scrollTo object.

Hi and Welcome to the GreenSock forums,
 
You may be a beginner but this effect would require some fairly advanced techniques.
 
To answer your question directly, yes TweenLite's ticker has a tick event that you can use.
TweenLite.ticker.addEventListener("tick", myFunction); more info on ticker: http://greensock.com/docs/#/HTML5/GSAP/TweenLite/ticker/
 
Likewise you could also run an onUpdate function just when a tween is running
TweenLite.to(el, 1, {y:200, onUpdate:myFunction}); In both cases myFunction could handle your change in x position.
 
However, you may also want to consider that you could create a timeline of tweens that has each element following the same curve. It would then be possible to control the timeline to move all the elements as once. Again, this would be fairly involved to set up properly so you might want to just start with what you are comfortable with.
 
Below is an example of multiple items following the same Bezier curve
http://codepen.io/GreenSock/pen/iKcrD?editors=001

Thanks for the CodePen demos. Certainly helpful. They exposed a few problems. I focused on the first one only.
 
The most trouble-some problem was that ALL your code for creating the image slider was inside the click function for skizzen.
This means every time the skizzen button was clicked a new image slider was being generated.
 
I edited the pen so that the image slide is built once on page load and the skizzen button only does:
 
var skizzen = new TimelineMax({}); $(".skizzenButton").on("click", function() {             skizzen.to(".ausblenden", 0, {autoAlpha: 0})             .to(z, 1, {autoAlpha: 1}, "+=0.5")   tl.resume(); //resume the slider });  
http://codepen.io/GreenSock/pen/414b706dd82f79046d706e60e149f706/
 
Another issue was that you were defining your tl var (for the image slider timeline) to late in your code so this made it difficult for other buttons / code to reference it.  So I moved the image slider variable declarations to the top of the code.
 
In the code pen above I wired up the Magnus button to illustrate how the image slider timeline can be paused.
 
Do this
 
Freshly load: http://codepen.io/GreenSock/pen/414b706dd82f79046d706e60e149f706/ click on Arbeiten > skizzen watch image slider until image 2 shows up click Magnus button notice that image slider is paused while other content is "half-faded" on top go back to Arbeiten > skizzen notice that image slider resumes playback from slide 2 without error repeat steps 4 - 7 you can now pause the slideshow from any button by adding tl.pause();

Hi and thanks for providing the demos.
 
Having 2 separate timelines is definitely a more manageable approach. Otherwise you would have to target the tween inside the timeline and change its duration repeatedly. Using the time variable as the duration and changing it repeatedly is not sufficient as that only gets read ONCE when the tween is created.
 
Also, please add a console.log("timerand()") to your timerand() function. You will see that it only fires once when the page first loads in your latest pen.
 
Note you need to make the following change:
 
bad:
tl.to("#p2", time, {opacity:1, ease:Power1.easeIn, onComplete:timerand()}) //do not use () this forces the function to be called when the tween is created
 
good:
tl.to("#p2", time, {opacity:1, ease:Power1.easeIn, onComplete:timerand}) //this passes a reference to the timerand function to the onComplete callback
 
BTW, that is a very common mistake. Nothing to worry about.
 
Here is a revised version that has a single repeating timeline that changes its timeScale() when it repeats:
 
var tl = new TimelineMax({repeat:-1}); tl.to("#p2", time, {opacity:1, x:200, ease:Power1.easeIn, onComplete:timerand}) function timerand(){   console.log("timerand()")   var time=(Math.floor(Math.random()*(2 - 0.5 +1))+ 0.5);   tl.timeScale(time) }  
http://codepen.io/GreenSock/pen/DsBof

Hi Andy,
 
Are you using the latest version of GSAP? It should be v 1.13.1, but we added a new lagSmoothing() feature in v.1.12.0 that will make the engine automatically adjust for cpu spikes.
 
In older versions of GSAP if you had a bunch of tweens scheduled to run at a time of 0 seconds and there was 0.5 seconds of CPU lock-up, the first render of the tweens would honor the elapsed time and render all those tweens at 0.5 seconds.
With lagSmoothing(), in such a scenario the first render would only happen at 33ms (or whatever value you specify)
 
More details here: http://greensock.com/gsap-1-12-0
 
Let us know if you have the same behavior with version 1.12.0 or greater. 
 
Thanks!

There is a little problem with your code. When you do
mainTL.add( intro() ); You are just calling the intro() function which creates a TweenMax.set() and TweenMax.staggerTo(), those tweens are not being added to the timeline. Those tweens are just running on their own. To test this you could try adding after the add()
console.log (mainTL.duration()) // 0 The trick is that your intro function needs to return a single tween or timeline of tweens. So the fix for your code is
function intro(){   var tl = new TimelineLite();    tl.set(".photo", {xPercent:-50, yPercent:-50, opacity:0});    tl.staggerTo(".photo", .5, { opacity:1 }, 1);   return tl; } Here is some code that illustrates add()-ing 3 timelines into a master timeline using the "functions that return a timeline" technique:
 
//these functions return timelines function box1() {   var tl = new TimelineLite();   tl.to("#box1", 1, {rotation:360})     .to("#box1", 1, {opacity:0})   return tl;   } function box2() {   var tl = new TimelineLite();   tl.to("#box2", 1, {top:100})     .to("#box2", 1, {opacity:0})   return tl;   } function box3() {   var tl = new TimelineLite();   tl.to("#box3", 1, {rotation:-360})     .to("#box3", 1, {opacity:0})   return tl;   } var masterTimeline = new TimelineMax({repeat:300, yoyo:true, repeatDelay:1}); masterTimeline.add(box1())//starts at time of 0 .add(box2(), 0.5)//starts at 0.5 seconds .add(box3(), 1)// starts at 1 second .from("#progress", masterTimeline.duration(), {scaleX:0, transformOrigin:"left center"}, 0)// starts a time of 0 and its duration matches that of the timeline it is in. Live demo: http://codepen.io/GreenSock/pen/epILr?editors=001

Simple syntax error. You are nesting delay in the css object.
 
bad:
TweenLite.to($rsContent, 0.4, {css: {opacity:"0.10", delay:0.5}, ease:Power2.easeOut}); good:
TweenLite.to($rsContent, 0.4, {css: {opacity:"0.10"}, delay:0.5, ease:Power2.easeOut}); FWIW you really don't need the CSS object at all. If the target of your tween is a DOM element and you are tweening css properties, that object gets created automatically behind the scenes.
 
You can just do:
TweenLite.to($rsContent, 0.4, {opacity:"0.10", delay:0.5, ease:Power2.easeOut}); http://codepen.io/GreenSock/pen/zgsof
 
More info on the CSS object read the intro to the CSSPlugin docs: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html
 
More basic demos: http://codepen.io/collection/ifybJ/