Share Posted March 24, 2019 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! Link to comment Share on other sites More sharing options...
Share Posted March 24, 2019 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. 6 Link to comment Share on other sites More sharing options...
Share Posted March 25, 2019 You can also get a similar path effect using two different SlowMo eases: See the Pen aMxoMj by ryan_labar (@ryan_labar) on CodePen 6 Link to comment Share on other sites More sharing options...
Share Posted March 25, 2019 Nice work @elegantseagulls. ? 1 Link to comment Share on other sites More sharing options...
Author Share Posted March 26, 2019 @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 More sharing options...
Share Posted March 26, 2019 @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. 4 Link to comment Share on other sites More sharing options...
Share Posted March 26, 2019 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 3 Link to comment Share on other sites More sharing options...
Share Posted March 26, 2019 ... 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 4 Link to comment Share on other sites More sharing options...
Author Share Posted March 27, 2019 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 4 Link to comment Share on other sites More sharing options...
Share Posted March 27, 2019 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. 2 Link to comment Share on other sites More sharing options...
Author Share Posted March 28, 2019 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 More sharing options...
Share Posted March 28, 2019 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 3 2 Link to comment Share on other sites More sharing options...
Author Share Posted March 29, 2019 11 hours ago, mikel said: Hahaha, I learn something new every day! Next you'll tell me that the earth isn't flat 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now