How would you approach this animation?

[kevmon]

Hi,

 

I'm unable to provide a Codepen as I haven't figured out how to start this yet.  Here's what I'm trying to achieve:

 

1. On scroll (ScrollMagic) when the element comes into view, the sun comes in from the left

2. It follows the path and sort of lingers at the top-center for a bit (will use ease SlowMo for this)

3. Continues to go off the edge of the screen on the right as the element scrolls up and out of view

4. As you scroll in reverse, the same thing happens in reverse

 

Definitely not asking anyone to do the work for me, but hoping to get pointed in the right direction on how to approach it.

 

Thanks in advance!

 

 

[PointC]

Hi @kevmon 

 

Here's a demo I made for another forum question.

 

See the Pen rGZwqK by PointC (@PointC) on CodePen

You can see the section with the dog gets pinned and the dog sticks to the middle of the window for a bit as it travels from left to right. It's similar to what you're trying to do so it may give you some ideas.

 

For the travel path of the sun, you can check out the Bezierplugin:

https://greensock.com/docs/Plugins/BezierPlugin

 

You could also use a SVG and the MorphSVGPlugin.pathDataToBezier() method to create a path for the sun. Lots of options available.

 

Hopefully that helps. Happy tweening.

 

[elegantseagulls]

You can also get a similar path effect using two different SlowMo eases:

 

See the Pen aMxoMj by ryan_labar (@ryan_labar) on CodePen

 

[PointC]

Nice work @elegantseagulls. ?

[kevmon]

@PointC and @elegantseagulls,

 

Thanks for the help!  I'm almost there:

 

See the Pen xBeRBJ by kevinfrilot (@kevinfrilot) on CodePen

 

However, even though it seems to be following the path, it's not adjusting the path to match the viewport width.  Any suggestions?

[elegantseagulls]

@kevmon

 

I'm thinking you'll either need to take the approach I took with eases, or have the Sun be contained in the SVG.

 

Another solution to provide more true-to-path accuracy would be to use the CustomEase plugin. This uses your SunPath to create the ease, and I'm using relative units to ensure it traverses the viewport:

 

See the Pen aMxPNo by ryan_labar (@ryan_labar) on CodePen

 

 

That said, I haven't had my morning coffee, so someone may have a better solution using your current setup.

 

 

[mikel]

Hi @kevmon,

 

 

The transforms in your SVG are a bit irritating

<g id="?-Landing-(Desktop)" transform="translate(0.000000, -2966.000000)" stroke="#979797">

 

Here a hand written SVG including sun and path:

 

See the Pen QoPQLX by mikeK (@mikeK) on CodePen

 

More info: The SVG `path` Syntax: An Illustrated Guide

 

Happy sunshine ...

Mikel

 

 

[mikel]

 

... for the special timing - stay at zenith for a while - I would tween the progress parts with different easings.

 

See the Pen QoRjQg by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[kevmon]

Thanks so much everyone!  All of your ideas came together to help make what I needed

 

See the Pen pYXzWo by kevinfrilot (@kevinfrilot) on CodePen

This forum is really great.  I hope to learn enough to give back

 

Kevin

 

[explorerzip]

Great work. I did notice, however, that scrolling with the mouse wheel is quite jerky: moves rather quick from left to right. You might want to lock the scrolling until the sun moves all the way from left to right. The animation is fine if you click the scrollbar.

[kevmon]

8 hours ago, explorerzip said:

Great work. I did notice, however, that scrolling with the mouse wheel is quite jerky: moves rather quick from left to right. You might want to lock the scrolling until the sun moves all the way from left to right. The animation is fine if you click the scrollbar.

 

Thanks, really great point, I've just updated above to fix that

[mikel]

Hi @kevmon,

 

looks great.

 

Important note: The name of the id "orbit" is just a creative slip. A fake?
For those who are unfamiliar: The sun is still not spinning around the earth. We 'rotate'!

 

See the Pen LawPjx by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[kevmon]

11 hours ago, mikel said:

Hahaha, I learn something new every day!  Next you'll tell me that the earth isn't flat