Jump to content

creativeocean last won the day on June 26 2013

creativeocean had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


creativeocean last won the day on June 26 2013

creativeocean had the most liked content!


26 Newbie

About creativeocean

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. hello sir, please help some code issue,

    i tried to long time this work but i have no idea how to do this.



  2. 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
  3. 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!
  4. 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/
  5. 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!
  6. 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!!
  7. 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
  8. 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!
  9. @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
  10. 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)
  11. Thanks Shaun! Looks quite promising
  12. 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.
  13. 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
  14. 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)?
  15. 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.