iDVB

Yup... just wanted to be sure there isn't a simple built in way that lets me use the same timeline. Since its the exact same.... just needs to be recalculated. 

We have this animation that turns animates a PURPLE circle with respect to a RED circle to feel the full screen.

Then when you close that (close button) it should animate back to the other circle. 

This currently works ONLY if you do not change the position of the RED circle by scrolling the page while the purple one is open.

https://codesandbox.io/s/vigilant-snow-yhf5q?file=/src/Circle.js

Is there some way to "recalculate" the props (location) of the circle when reversing?

Cheers!

See the Pen Circle.js by s (@s) on CodePen

Thanks @ZachSaucier so here is what we got working.

https://codesandbox.io/s/young-dust-900hv?file=/src/MetaballSwarm.js

This is nearly there to what we want. Are you able to comment on perf/efficiency of our approach here?

Seems like there is a bit of jitter if you play with it up and down a bit.

https://codesandbox.io/s/heuristic-dew-84ys4?file=/src/MetaballSwarm.js

We have the "effect" that we want working..... but the problem we're struggling with is how to get it to work in our usecase.

In the example above, you can see that moving the grouped balls causes them to separate the faster you move. 

However, in our case, we want the separation to be fixed to the center-center of the screen, so that as you scroll fast down... the balls start to separate from the center upwards. Then when you stop scrolling the balls reposition themselves center-center again.  

This allows us to only have a canvas the size of the viewport and NOT the size of the page. So we are faking that the circle is traveling down the page with this same effect of spreading.  

Our Thoughts:

Maybe the solution is something like tracking the direction the ball is moving in the viewport and then using it with the velocity of the scroll animation in order to create that spread, while still keeping the origin of the balls in the center.  

Is there some way to create a loop that constantly is giving an element a NEW tween destination that is constantly changing? Seems like maybe a perf anti-pattern though? Maybe that could be used somehow?

I hope that makes some sense. It was even confusing to write.

Thanks @ZachSaucier

We've now discovered your `MotionPathHelper`, and in turn signed up for "ShockinglyGreen" Club to get these wonderful toys.

Now we're really noodling how we can control these type of animations, now that its setup using a MotionPath.

https://codesandbox.io/s/snowy-cdn-e2e3o?file=/src/App.js:2055-2415

We're now realizing that if we don't split the path up into multiple parts (likely use the points vs svg path), than we can't change the duration for "portions" of the animation so that it keeps the ball in the the viewport.

Is there some easy way to wrangle this so that we can get these amazing motionpaths AND get the ball to stay in the viewport?

https://codesandbox.io/s/circle-to-image-main-hot9o?file=/src/index.js

We're wrestling with what's likely going to be a rather simple math equation but can't seem to nail it.

As you can see in this codesandbox, we have a circle animating down the screen and stopping along the way to interact with certain points along the way. 

Ideally, we'd love to figure out the proper durations for each so that as you scroll down the page the circle is always in the viewport.

If anyone can figure this out, we'd really appreciate a bit of detail in how the math works. Maybe it will unlock this for us so we can level up.

Cheers!

See the Pen index.js by s (@s) on CodePen

Ya, its just that we're not sure how that looks with respect to scroll trigger. 

Since the scroll trigger's start and end are based on the percent the trigger is at in the viewport. 

Since you are suggesting using one lone timeline for the whole page scroll.... that sounds to use like the trigger is "the page" 

but then those start and end's don't seem to make sense to us.... when is the page NOT on the screen.... or when is it at 30% of the screen... when its basically always on the screen.  Hope that helps. I'm sure there is a fundamental gap in our understanding.

3 hours ago, ZachSaucier said:

Use a big timeline whose values are calculated based on the distance at the start.

Thanks @ZachSaucier! 

I'm a colleague of @cbravo 's, can I take a stab at explaining what our goal is and we'd really appreciate any direction or examples on how we might accomplish it.

We have a long scroll site that have lets say 10 things/points statically in the page flow that we want a single circle to interact with as you get to them in the scroll. With your "calculate values on distance at start" what does that mean to you and what does that look like with scrolltrigger?

The end animation will be more complex and be something similar to this site https://rappipay.mx/, in that there is a single thing flying down the page on scroll and interacting with this. However, the difference here is the stage/view and these things are fixed position and animating into the stage, vs what we want which is things actually in the natural flow of the page being interacted with as you scroll down.

Thanks @OSUblake @ZachSaucier!

Maybe simply adding to these call outs...

https://www.screencast.com/t/nTC0jlC4

something that just says "For examples of how to import this optional plugin/module please see..."

and then give the link to:  https://greensock.com/docs/v3/Installation

We spent a good deal of time searching and browsing around the docs for both v2 and v3 and did not come across the import directions on the install page.

We've been all over google and the GSAP docs and can't seem to find any references as how to import extra eases like ExpoScale now in GSAP v3.

Previously:

import TimelineMax, { ExpoScaleEase } from 'gsap';
...
{ ease: ExpoScaleEase.config(1, 10, Expo.easeOut) }
...

Now:

import gsap, { ExpoScaleEase } from 'gsap';
...
{ ease: 'expoScale(1, 10, expo.out)' }
...

Also tried:

import gsap from 'gsap';
import { ExpoScaleEase } from 'gsap/EasePack';

Also...

Now assuming that its a global import like...

import 'gsap/EasePack';

... do we only need to import once in a whole react project or do we need to keep importing into each component that needs it?

Is this correct for the import? Seems odd to import an object and then never use it.
Also, it does not seem to work.

By the way, GSAP 1.18.5 was just released and it offers better support for things like this. 

import { TweenLite, TweenMax, TimelineMax, Elastic } from "gsap";

I got it to work okay in Webpack, Browserify, and RequireJS. 

Maybe I'm missing something, but I'm using v1.19.0 and everything is still using globals.

Even simply coding...

import 'gsap';

or...

import { tree } from 'gsap';

still allows you to use all globals anywhere in your code. TweenLite, TimelineMax etc etc.

What exactly is declaring the component name in the import supposed to do?

Nope. I fixed it. The issue was that TweenLite doesn't seem to work. 

When I use TweenMax it works fine.

GSAP is a really great tool. You guys should consider reorganizing you bower package and including AMD support, even if it means supporting two versions in the bower package.

Cheers

I'm also using RequireJS and having issues...

I have this in my paths...

paths: {
    'jquery': 'bower_components/jquery/jquery',
    'TweenLite': 'bower_components/greensock/src/uncompressed/TweenLite',
    'TimelineLite': 'bower_components/greensock/src/uncompressed/TimelineLite',
    'TimelineMax': 'bower_components/greensock/src/uncompressed/TimelineMax',
  },

 shim: {
    'TimelineLite' : {
      deps: ['TweenLite'],
      exports: 'TimelineLite'
    }
  }

define([
      'jquery',
      'TimelineLite'
    ],

TweenLite.to($('.test'), 1.5, {width:50, height:50, onComplete:function(){console.log('COMPLETED!');}});