Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
eddy10957

Enabling divs and script along Bezier Path

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.

Share this post


Link to post
Share on other sites

Hey Eddy and welcome! We were all new here at some point or another :) 

 

I like your idea! There are some forum posts here that may help you get it started. I'd check them out and then post a demo of what you have if you run into some problem.

 

 

 

  • Like 2

Share this post


Link to post
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 :( .

Share this post


Link to post
Share on other sites

I think this post can help you create a demo:

 

Try to include only the relevant content to recreate your trouble parts - we don't need to see the nagivation, footer, etc. in the demo (or any styles or JS related to those parts).

Share this post


Link to post
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. 

Share this post


Link to post
Share on other sites

Thanks , proably better to define this way but anyway the bezier path how i defined was working, the problem is how to drop <div> </div>  in a certain point of the bezier path and how to Pin it.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×