Jump to content
Search Community

Injecting Javascript?

Creek test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

This might just not be possible - given I'm using Greensock to avoid Javascript as much as possible? 


I can just do it the messy way, but I was hoping one of the gurus here might know the javascript trick to keep the code neater? 


Basically, I need to inject javascript into my timeline. But if I try to do that, I break whichever javascript rule. Which is what makes javascript so much fun - ANY slightest error or typo, just drop any character out of place - and everything's broken. I just love it so much! 


Sarcasm aside - the animation concept I'm going for is to find and replace various html elements with javascript - repeat the same animation on the new code - possibly I need an array so it knows when to stop? 


So I try to hunt down on the web how to write the javascript - I find an example - I then try to plug that example into a timeline - and then everything is of course broken. And I don't know why - because I was hoping to avoid javascript - but then again, I'm trying to be a tad bit fancy to keep the code neat - so I guess I'm asking for it - and, of course, whatever I did is either wrong or isn't up to javascript snuff - and... nada. 


And I completely understand if this request for help is completely out of scope. Just hoping that if I see how one of you gurus might approach this problem - I can then hopefully read the guru code and see how to properly format ye olde javascript to approach the problem? I'm basically asking for a cheat sheet - then I can kinda somewhat copy the answer? 

See the Pen poaBYZv by tibbeecode (@tibbeecode) on CodePen

Link to comment
Share on other sites

  • Solution

Yeah, we really try to keep these forums focused on GSAP-specific questions. We just don't have the resources to offer free general consulting services. Please read the forum guidelines


That being said, this may not be terribly difficult if I understand you correctly:

See the Pen MWQRdaG?editors=0010 by GreenSock (@GreenSock) on CodePen


But if I was building this, I wouldn't be using one long timeline (unless I needed to be able to scrub it). I'd just set up some functions that handle most of the work for me. Set up an Array with the chunks of HTML content as strings, then have a function that does the transitions (fade out the element, swap in the new content, then fade it back up, then use a delayedCall() to call the function again and iterate the index of the Array). Given your comments about JavaScript sounding scary, though, my guess is that you may prefer a plain timeline approach even if it involves more code. And that's fine. 


Also, there's no such thing as ease: "normal". Maybe you meant ease: "none"? Or ease: "power1" (the default)? 


Good luck!

  • Thanks 1
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...