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 de en en fr en en ca en en en en en en en en en en es en en en en en en en en en en en fr fr en en en en en en en ms en nb en ms en en en en en en en en en ms en nb en ms en en en en en en en en en ms en nb en ms en en en en en en en en en ms en nb en ms en en en en en en en en en ms en nb en ms en en en en en en en en en en en en en en ms en nb en ms en en en en en en en en en ms en nb en ms 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 ms en nb en ms en en en en en en en ms en nb en ms en en en en en en en en en nb en en en ca zh en en en en en en en en en nb en en en ca zh en en en en en en en es en de en en en es en es en de en en en es 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
Thanks @explorerzip, I usually do but it just ended up inline while I was debugging this one, will use it externally in future if it works. Cheers!
Loading GSAP after JavaScript dynamically generated elements have loaded
cbg replied to cbg's topic in Banner Animation
Thanks @mikel but that wasn't the problem. I've just been tinkering with it some more this afternoon and found the issue, one of those silly ones! Basically when I remove GSDevTools (the playhead scrubber tool that lets you scrub through the ad) it works absolutely fine. GSDevTools just obviously wasn't playing ball with the new order. Thats a few hours I'll never get back! Thanks for all of your suggestions everyone.
I think it isn't playing automatically on my Codepen because the DoubleClick code is executed on window.load however my GSAP is being executed before perhaps? Does that help anyone as a clue? Thank you.
Hi ohm. That is how I originally had it setup but unfortunately, as mentioned in the original post, when the code is in that order the heights are being calculated differently. For example, compare the distance between the 'dates would go right here' text and the 'book now' button between your version and my version, you can see on your version it is much closer because the animations are being calculated before the content exists. Do you see what I mean? Thanks.
Thanks for taking the time to respond ExplorerZip but that doesn’t really answer my question. I’ve launched many ads via DoubleClick studio with dynamic feeds so I’m aware of how that all works. My issue is more with how I can the Codepen included so that it plays automatically. As mentioned, I have reordered the code so that GSAP now takes into account the sizes of the dynamic elements correctly but the animation no longer starts automatically. thanks.
How can I make GreenSock calculate the size of an element after JavaScript has loaded?
cbg replied to cbg's topic in GSAP
I just realised a new problem I'm having is very similar to this one. I've tried implementing the DOM ready fix but in this instance the heights still aren't being calculated correctly? https://greensock.com/forums/topic/19539-loading-gsap-after-javascript-dynamically-generated-elements-have-loaded/?tab=comments#comment-90744
Loading GSAP after JavaScript dynamically generated elements have loaded
cbg replied to cbg's topic in Banner Animation
I realised I've asked an almost identical question in the past but in this instance the heights still aren't being calculated correctly. https://greensock.com/forums/topic/18976-how-can-i-make-greensock-calculate-the-size-of-an-element-after-javascript-has-loaded/?tab=comments#comment-88118
Loading GSAP after JavaScript dynamically generated elements have loaded
cbg posted a topic in Banner Animation
Hello, I'm trying to create a banner with GSAP and a DoubleClick dynamic feed. Basically dynamic content is pulled into my banner via JavaScript. In order to animate the content I need to wait until the content has been inserted first. This is because I'm animating the heights of DIVs that contain content and if I don't wait until the content has been inserted the heights will be wrong. I've tried various things like document ready and window onload but it doesn't seem to be working. The CodePen I have attached is the closest I've gotten but the issue is, now that I've reordered the code the GSAP animation no longer plays automatically. Could somebody help me please? https://codepen.io/cbg/pen/pqjbmx
Start timeline only after an event has happened
cbg posted a topic in Banner Animation
Hello, I'm producing an ad template for DoubleClick Studio using polite loading, this is my first time using this. The polite loading appears to work correctly but my GSAP animation plays straight away, how can I have my GSAP animation only begin after it has loaded like the other elements? You'll see on my CodePen that the ball moves before the 'loading' disappears. I know I need to put the animation code within the politeInit function, but when I do this, GSAP breaks completely and it never plays. Thanks JavaScript novice
How can I make GreenSock calculate the size of an element after JavaScript has loaded?
cbg replied to cbg's topic in GSAP
Thank you! Do you know how I can make the following run, only if the image exists in the DOM? .to ("#image2", 0.5, {opacity:0, delay: 3})
How can I make GreenSock calculate the size of an element after JavaScript has loaded?
cbg posted a topic in GSAP
Hello. I'm working on an animated display ad which uses dynamic content pulled in from a feed using JavaScript. I have an unordered list that is populated with content dynamically with JavaScript, the list could contain a variable amount of list items at varying lengths. When I try an animate this list with GreenSock (revealing it by animating the height from 0px) it animates the list based on the content not being there. How can I make GreenSock see the content that gets dynamically generated with JavaScript? Hopefully this makes sense, it's difficult to create a CodePen on this one since it links to external sources etc. Cheers
How to animate a single element through a page with GSAP and ScrollMagic
cbg replied to cbg's topic in GSAP
Hi Sahil, just wanted to say thanks. This really helped me out!
How to animate a single element through a page with GSAP and ScrollMagic
cbg posted a topic in GSAP
Hi there, can anyone help me please? I have a page with a div that has a fixed position. I'd like to animate the element inside the div with GSAP when you scroll through the sections on the page with ScrollMagic. I am able to make the object move when you enter a section and when you scroll back it is reversed. How can I make it so that the object moves from it's current position to a new position when the user scrolls into the next section? I'd like the element to keep changing position when you enter a different section. I've seen many examples of GSAP and Scrollmagic in action but I'm struggling to find any examples that animate a single element through. A simple Codepen example is attached. Thanks.
How can I execute a Javascript function in my timeline?
cbg replied to cbg's topic in GSAP
Thanks Dipscom. I was able put the script into a variable and then use the onComplete parameter in my timeline to play the variable in the end. Now I've learnt how I'll be able to reuse this method!
How can I execute a Javascript function in my timeline?
cbg posted a topic in GSAP
Hi there, I'm using TimelineMax and getting some great results. I'm getting quite proficient with using the Timeline to animate various elements on the page. I've found a script called Typed.js that I've been able to run independently of the Timeline perfectly but I'm unsure of how to get it to play within the timeline? I know there are some callback features but my Javascript isn't great! http://www.mattboldt.com/demos/typed-js/
“...obviously GSAP is incredible”
“It's shocking the @w3c didn't use @greensock as a model of how to do animation via code. Did they even ask animators what they use?”
“This stuff is so incredibly amazing I can't believe it. The level of details and options put into these things and the natural instinct GreenSock has for solving everyday problems is impressive.”
“GreenSock has encouraged me to play with the code, to dream up new and exciting things to do.”
“With the incredible functionality, and the mind-blowing customer service, the price of Club GreenSock admission is well worth it!”
“I’ve long felt like GSAP is the best kept secret in JavaScript.”
“After searching around the web for alternatives, I found GreenSock to be the most performant.”
“I am more and more amazed every day, and very glad that I decided to get a business license.”
“GSAP makes my job fun, because it allows me to focus on creating rich, engaging web experiences, while GSAP handles much of the implementation details behind the scenes.”
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.