Easily set MidPoint of Animation?

[TradingBo]

Hi,

 

Loving the library so far guys just have a quick question. 

 

Is there a simple way to specify an animations midpoint and set css properties so it applies them via that midpoint?

 

I.E  a TweenMax function such as:  TweenMax.from > Midpoint > To  

 

I realise this is basically how Tweens work and you should aim to chain multiple tweens together in a timeline to create multiple part animations, 

 

However I was just curious to see if there was something akin to this i'm missing as couldn't find anything in the documentation?

 

The aim is to make the dots fade to a low opacity at the midpoint (as they rotate behind)  then return to full opacity as they return to the front (and end point of the animation) ! 

 

Thanks in advance,

 

Oli

 

See the Pen KxdjYy by EasterIslandMedia (@EasterIslandMedia) on CodePen

 

See the Pen KxdjYy by EasterIslandMedia (@EasterIslandMedia) on CodePen

[Carl]

Hi and welcome to the GreenSock forums.

 

Thanks for the demo. That's a pretty cool way to make a rotating sphere. 

 

The API makes it pretty straightforward to detect the midpoint of an animation.

 

For any given animation you can query its duration() or progress() to get the "halfway" or mid point

 

var tween = TweenMax.to(something, 10, {x:100, ease:Linear.easeNone});

 

to start another animation when that tween is in the middle you would schedule it start at a time of 

tween.duration() * 0.5

//or

tween.progress(0.5)

 

And, yes I'd use a timeline to schedule one tween to start at the midpoint of another.

 

An issue with your setup is that your elements are dispersed all over the globe initially and each rotate 360 from their current position. So let's say an element is exactly behind the globe, if you fade it out halfway through its animation it will fade out when it is in front of the globe. no good.

 

My first step was to set up every element in a vertical half-ring around the front of the globe and get them all to rotate the same way and fade out at the same time

 

 

See the Pen JaGPzM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

once I got that working I then randomized the started progress of each elements timeline using

 

progress(Math.random())

 

See the Pen ZMQzGz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

A big component to this is using a SlowMo ease with yoyoMode set to true at the right time to get the elements to fade out and back in.

https://greensock.com/docs/Easing/SlowMo

 

I could probably take 2 hours explaining all this, but hopefully this gives you something to play with and tweak.

 

---

 

Another approach might be to use an onUpdate callback to map the current rotationY to a range of opacities so that its opacity will be a factor of its rotation.

 

 

 

 

 

 

 

 

 

[TradingBo]

Wow thanks for the great response Carl, this is way more comprehensive than I was expecting  

 

Apologies for the belated reply have been away all weekend.

You've taught me a lot about GSAP here as well as the JS Math.random() object method, really appreciate it.

 

The catch with this approach that I can see however is that a designer can't target individual elements consistently to fix any small position or issues, not really a problem with circles but if for arguments sake you were to use a different shape it might look a little messy.

 

So after having a play I amended the HTML to a round 90 <div> added some CSS classes to control the sizing for the centre elements, switched the Math.random() to an index calc and the elements starting .progress via index/180... et voila hopefully now a consistent sphere with opacity effect! 

 

This is arguably not efficient, so will be playing some more today to see if it can't be done more easily and maybe re-create using <svg>  to see if i can't get it responsive! 

 

Thanks again though, your advice was awesome.

 

Have amended the CodePen to reflect changes:

 

See the Pen KxdjYy by EasterIslandMedia (@EasterIslandMedia) on CodePen

 

 

 

 

 

[Carl]

Hi TradingBo,

 

Really cool to see you take my limited advice and take it further. The demo looks really good. Thanks for sharing!

[TradingBo]

Also just noticed, there is an unnecessary repeat of the  line

   tl.to(element, duration * 0.5, {opacity:0, repeat:10000, repeatDelay: duration * 0.5, ease:SlowMo.ease.config(0.3, 0.7, true)}, duration * 0.25);

 in the CubeSpin() function, have now removed from the CodePen