creativeocean

I did something similar recently, using GSAP's stagger 'grid' feature: https://codepen.io/creativeocean/pen/rNOyppy?editors=0010 I'd be happy to help out on this. Please shoot me an email with any other project details/requirements and I'll send a quote for the work: tom@creativeocean.com

Hi Jiri. I'm full for the next few weeks with my current workload. If you create a simplified codepen example of what you're trying to accomplish and post your question(s) in the forums, I'm sure someone will be able to assist! Best of luck

Personally, I'd avoid mixing CSS animation and JS animation. Maybe it doesn't matter much here, but in more complex/lengthy code situations, it can get confusing as to where you're doing the animating. And GSAP does such a good job with smoothing over browser inconsistencies, I tend to use it for many things that I used to style with CSS. Anyway, back to your specific question: you could set the SVG viewBox to match the dimensions of the image (viewBox="0 0 1600 1200") and set the svg style to position:fixed (or absolute). Also remove all of that unnecessary transform CSS. And don't specify a height on the SVG tag, you only need the viewBox if you want it to scale proportionally like an <img>. All of this will mess up your cx, cy, rx, ry attributes on #ellipse, so you'll have to update those to position it over the light. Lastly, remove the min-width/height CSS on the img so it doesn't scale disproportionally (that'll keep the SVG and image elements behaving the same). Hope that all helps!

Definitely look into doing the SVG thing. Or if you don't want to use SVG, here's a way to use JS and CSS to proportionally scale a div and its content: https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/

Oh man! Jack you genius. Thanks a bunch for solving the mystery...hopefully this thread saves someone else some time/lost hair in the future! Many thanks again, Jack!

This topic seems really relevant to an issue I'm running into. Chrome, Safair, even IE10 all work fine, but in Firefox I'm unable to rotate the contents of an SVG mask: https://codepen.io/creativeocean/pen/wbMxex As time was short, I found a decent work around by avoiding masks altogether, but I'd still love to know if anyone has any insights into this issue. Thanks!!

I'd just absolutely position my light animation over the appropriate spot of the image, and then handle all the resize/mouse position stuff on a div that contained everything inside. As for light flicker, I love the easing solutions mentioned above! Chances are pretty good I would have over-complicated the solution with a custom flicker() function, like so: https://codepen.io/creativeocean/pen/WBQpYp?editors=0010

Sorry I'm so late to this thread! April got a bit busier than usual..which isn't such a bad problem to have Anyway, @greykrav I think your adaptation turned out quite nice. Thanks for all the kind words and best of luck!

@Shaun Gorneau In Chrome I'm seeing a slight jitter in all three of your example tweens. In my solution, having a longer duration tween on the interior div ensured that there wasn't any jittering at the tail end of the parent element's tween. That's when the ease causes the smallest differences, and I'm guessing that's why the text still jittered a bit when force3D was set to false. It definite improved things, but didn't fix the jitter entirely. PS: Codepen embeds aren't showing up for me right now, so here's the link: https://codepen.io/creativeocean/pen/vMNOVB

I wish I could hug you guys! I wound up adding a separate tween on the actual text div that has the force3D set to false (and nominal rotation). The length of the tween needed to be a bit longer than the scaling one to make everything smooth...but problem solved! Thanks again (updated code is in the pen at the top of this thread)

Thanks Shaun! Looks quite promising

Anyone have a good idea about how I could prevent the text jittering that appears in Chrome? All the other browsers I've tried seem smooth enough. I've been beating my head against a wall for long enough that I'm hoping someone here has solved this issue before. Thanks in advance for any guidance!! Update: Two great solutions were provided below. I've updated my pen so you can see the issue and the fix, side by side.

Hello! My name is Tom Miller. I'm an animator and front-end dev who specializes in building standard, rich-media, and dynamic ads; though any GSAP-heavy project would be wheelhouse. All my HTML/CSS/JS is hand-coded for optimum file size, performance, and maintainability (no IDEs like GWD or Animate). I come from a design and motion graphics background, and became a freelance animator/developer in 2006 (which means I made the switch from Flash/AS3 to Javascript around 2013). I work for ad agencies, post-houses, and directly with brands of all sizes. You can find a handful of my recent and noteworthy work here: https://creativeocean.com/. I also make digital experiments and demos here: https://codepen.io/creativeocean/. If you're interested in more info about my expertise, pricing, process, or just want to connect, please email me at info@creativeocean.com Thanks! Tom

Carl, this Additive Animations topic was very relevant. Takes what I was thinking of to a much more sophisticated level, but definitely on point! Thanks for sharing. Here's a codepen that illustrates a case where my proposed overwrite mode could be useful: http://codepen.io/creativeocean/pen/yJAzQv If it's unlikely to see an overwrite mode like this, then the logic for checking end values needs to be written separately. Is there a handy method for reading the end values (thinking maybe there's a way to use _gsTweenID to inspect Tweens of a given target)?

I'm half afraid to suggest this because it probably exists and it just didn't read the docs close enough, but I think it'd be really useful to have an overwrite mode that checks the assigned value of a tweened property, and doesn't overwrite if the value of one tween matches the value of another conflicting tween. For example, if you have 1 sec tween to Y position "10", and during that tween you call another 1 sec tween, also to Y position "10", the second tween could be ignored with this proposed overwrite mode. Could be useful when multiple UI elements effect the same targets and you don't want a stutter caused by successive tweens with unchanged property values. Hope that all makes sense.

@joe_midi & @kurrent-kurt: Many thanks!! This change made the difference Also, yes, I submitted feedback right after running into this enigmatic warning last week.

@flysi3000, thanks for the tip! However, the 'SVG_INVALID' error doesn't appear to be resolved by using longhand SVG closing tags. Here's a demo link from the H5 Validator for reference: https://h5validator.appspot.com/dcm/result/5800009450651648 (will expire after 30 days) I don't think the warning is actually because of any malformed tags, but rather just the presence of SVG. Again, I've been using this tool for a while, and only last week did I start seeing this 'Advanced HTML check' in the check-list results. Fortunately, I've yet to have any ads containing SVG rejected...yet.

This isn't really a GSAP topic, but it is a Banner Animation one. I use this ad validator tool frequently: https://h5validator.appspot.com/dcm –and today I noticed a new error message, reported upon upload of an ad containing SVG in the HTML: Advanced HTML check One of your HTML5 assets is invalid and cannot be analyzed. Please correct any malformed assets and try again. More details:SVG_INVALID The simplest and most cross-browser-reliable way to create alpha masks (that I know of) is with SVG. It's an invaluable feature for creating glowy sheens and other complex mask-reveal animations. Since the animations appear to work very well in all the browsers and devices I've tested, I'm stumped as to why DoubleClick would consider using inline SVG 'invalid'. Has anyone else run into this issue? I'm pretty sure this specific 'error' message is a recent modification to the validation/checking that this tool performs. I'm about to send out a batch of ads which use inline SVG today, so we'll see if any new rules apply and get my fancy pants rejected...

Jonathan, you saved my skin! Thanks a ton for the info.

I just noticed an encouraging new bullet point on the adwords HTML5 ad specs page: https://support.google.com/adwordspolicy/answer/176108 ...under the section "All other HTML5 ads" in the row labeled "Upload requirements" it now says we can externally reference "Google-hosted Greensock" YAY! (now does anyone have that google CDN link?)

The resolution to this topic was found in this thread: http://forums.greensock.com/topic/7674-videoloader-cue-points-and-loops/

Jack, thanks a ton for this update! Totally fixed the issue I was running into as well. Funny thing is, I wasn't having any trouble when previewing in the IDE, but (often, though not always) saw the issue when running in the browser. Am thinking that in the browser the performance degraded, which impacts the video playback, and if frames are dropped during playback it's possible to miss the cue point. Whether my guess is right or wrong, converting the embedded cue point to an AS one seems to have done the trick. Thanks again!

Was there any resolution to this topic? I'm experiencing the exact same thing. My cue points are working in the IDE, but not in the browser (on the second time through).

Doh! Part of my confusion is calling perlin noise a property ...it's a method! but can it's parameters be tweened?

I know that TweenLite can tween ANY numeric property of any object, but I'm stumped on how to tween a more complex property (for example bitmap data's perlin noise). Thanks for any and all help!