Webschmiede Posted May 25, 2022 Share Posted May 25, 2022 Hello guys, i'm a total newbie to this forum so i hope i'm doing this right. i tried to create a codepen link, but it just didn't worked out. what i want: while scrolling the page the rocket should slowly fly from bottom to top and on click the rocket turns around flys back to the bottom and again turns around. and so on. what my rocket does: flys from top to bottom while scrolling and i'm not able to turn it around on click. Does anyone have an idea what i can do? I'm thankful for any tip See the Pen by pen?template=LYQOEgW (@pen?template=LYQOEgW) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted May 25, 2022 Share Posted May 25, 2022 Hey there pal! Welcome to the forums. ☺️ It would be really helpful to us if you could get this pen working (even if it's not doing what you'd like) Just get rid of the console errors for us and make sure the JS is running. I've added in the right plugins in the JS panel for ya. See the Pen rNJYLbo?editors=0010 by GreenSock (@GreenSock) on CodePen When it's working I'm sure someone will be able to jump in and help. 1 Link to comment Share on other sites More sharing options...
Webschmiede Posted May 30, 2022 Author Share Posted May 30, 2022 Hey, i managed to make it work! See the Pen by pen?template=yLvvWeG (@pen?template=yLvvWeG) on CodePen Should I start new topic or will someone find this one and is trying to help me? Thanks for your help! 1 Link to comment Share on other sites More sharing options...
Cassie Posted May 30, 2022 Share Posted May 30, 2022 Thanks for sorting that out mate! How about this? See the Pen JjpLGja?editors=0011 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Webschmiede Posted May 30, 2022 Author Share Posted May 30, 2022 Thank you! The rotation on click how i wanted it to be! *-* But if you scroll down the page the rocket should fly from the clouds to the planet, and on click the page scrolls up and the rocket flys back to the clouds and spinns again. Do you know what i mean? 1 Link to comment Share on other sites More sharing options...
Solution Cassie Posted May 30, 2022 Solution Share Posted May 30, 2022 Well sure, you could do it the other way round, but you wouldn't really see it? See the Pen NWyYNjB by GreenSock (@GreenSock) on CodePen Quote start Number - The position along the path at which to start, where 0 is the beginning and 1 is the end and 0.5 is the middle. It can be any positive or negative decimal number. For example, 0.3 would start the element at the 30% point along the curve. Default is 0. 1 Link to comment Share on other sites More sharing options...
Webschmiede Posted May 31, 2022 Author Share Posted May 31, 2022 aaah thank you for the fast solution! *-* The position of the SVG will be fixed on the right side of the website, so it's working like a "to top button". That was the idea, i hope it's working out this way 1 Link to comment Share on other sites More sharing options...
Cassie Posted May 31, 2022 Share Posted May 31, 2022 Oh that's a really cute button idea. Love it! You'll want to use the body as the trigger then and also use a link with hidden text for accessibility. Here you go pal. See the Pen Yzeaaej?editors=1010 by GreenSock (@GreenSock) on CodePen 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