en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en nl en ms en en en en en en en en en it en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en ms en en en en en en hu en fr en pt en hu en es en en en it en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax.
Eugene Rayner    25 Likes (Newbie)
I've been looking into creating an effect that I see a lot of modern websites using. Im not sure if im meant to be using scrollmagic or not but it seems like quite a good library to plugin to gsap.
Here's an example of the effect that I am trying to create
The website above displays items on the webpage while you scroll. I am looking at creating something similar.
I thought the best place to start was to create a bezier curve, and have it only animate along the curve while I scroll - the only problem is, I have NO idea where to start.
Should I be looking at ScrollMagic's 'pinning' of objects and have them set to containers? Not sure.
Thanks in advance to anyone that posts any information on this topic.
See the Pen ZyVJWj by erayner (@erayner) on CodePen
Share on other sites
Eugene Rayner    25 Likes (Newbie)
Posted July 12, 2017
Answered my own question
If you're looking at doing something similar to me then i suggest you follow something similar below:
Essentially, we are setting the start section of a container to 100vh. Then we tell scrollmagic to pin that start container to the top of the screen and don't move for a set duration. Then we create variables for greensock's tweenmax animations. Finally we grab the variables and setTweens to scrollmagic scenes.
Hope this helps anyone in similar situations.
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 1
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
Bezier curve on scroll
“Honestly think without GSAP, I would have changed careers by now; it's that good.”
“Every time a new GSAP plugin is introduced, I'm close to bursting from excitement. The simplicity of the GreenSock API makes learning and applying these tools in projects such a dream.”
“GSAP hosts what is in my experience, the most welcoming, patient and helpful support forum I've ever come across. I've yet to see a question flat out ignored and the patience you all have in putting people on the right track, if not flat out solve their p”
“GSAP should be the default when it comes to Javascript animations. It should literally be part of the next Javascript update.”
“Massive shoutout to GreenSock for having an amazing product with fantastic documentation, hugely talented support staff and an active and helpful community. If you do anything with web animation you should *definitely* be using them.”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
“Go and browse through FWA or Awwwards, then view source of anything you see that has cool animation and you will be surprised how widely GSAP is used.”
“GSAP was a revelation for me to be compared with the introduction of jQuery.”
“I was astonished by the speed and versatility of animating with GSAP.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.