Jump to content
Search Community

Enabling divs and script along Bezier Path

eddy10957 test
Moderator Tag

Warning: Please note

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. 

Recommended Posts

Not sure if what i'll ask can be done with bezierpath but let's try. 

As you will notice i'm pretty new about this world especially to GSAP and scrollMagic,  i found the BezierPath on scroll the perfect animation for my website. I wanted to do a story teller site, so with the Bezier path i did a ship cruising along the page while scrolling, my question is if i can combine all the GSAP bezier path with this script https://github.com/jshom/story-teller ( it just writes down the story in a div ). So the idea is, while i scroll the page with the ship going around the site  there are some stopping point in the Bezier Path were a div appears and the story-teller.js starts to spell a part of the story,  then continue to scroll and another div with another paragraph appears. 

 

Sorry about my bad english and  probably all the errors i did about this world, i'm trying to improve and study this as much as possibile. Thanks.

Link to comment
Share on other sites

Hi thanks for the fast reply, of course it was better i shared some code so this is the first version  before the question was done

See the Pen vYBrvwX by eddy10957 (@eddy10957) on CodePen

 

then after i took a look at the second topic you sent me i tried to replicate their result combinig to the story teller js  but seems it doesn't work ( on codePen didn't include the story-teller.js  because there are too many file and i don't know how to include them in the codePen sorry??

See the Pen xxKzMKx by eddy10957 (@eddy10957) on CodePen

 

Sorry another time  if the codePens are a bit a mess :( .

Link to comment
Share on other sites

So after a bit of study and researching, and obviusly reading your answer's link etc , i understood how to resolve my problem but to do so i need to drop during the bezier path some (3 or 4)  input button i need to use them to open a bulma modal. So i researched and found this one that drops divs (

See the Pen zqmWdv by GreenSock (@GreenSock) on CodePen

)  but i can't make it work with my bezier path structure. So this is my code pen (

See the Pen BaBGGWJ by eddy10957 (@eddy10957) on CodePen

), they cannot let me include the various tweenmax.js scrollmagic.js etc etc but it works for sure. So two question are how to drop something on the path ? Why my bezier path is not smooth i tried to equal the exit of a point of the path with the starting point of the next point of the path but seems not working good?  

I've read there are some plugins with a "pro" subscription but this this a no budget work so i can't afford the plugin that makes it easier, so if i can do it with the basic bezier path etc it would be really nice. Thanks so much for the help. 

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.
×
×
  • Create New...