Jump to content
GreenSock

kevmon

How would you approach this animation?

Recommended Posts

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!

 

 

CleanShot 2019-03-24 at 16.05.57@2x.jpg

Link to comment
Share on other sites

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.

:)

 

  • Like 6
Link to comment
Share on other sites

@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?

Link to comment
Share on other sites

@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.

 

 

  • Like 4
Link to comment
Share on other sites

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

 

 

  • Like 3
Link to comment
Share on other sites

 

... 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

 

 

  • Like 4
Link to comment
Share on other sites

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

 

  • Like 4
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

 

  • Like 3
  • Haha 2
Link to comment
Share on other sites

11 hours ago, mikel said:

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

 

  • Haha 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×