Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 02/10/2018 in all areas

  1. That's correct. You can't animate the SVG elements with JavaScript when you add it via <img>. You need to have it inline or inject it. Similar thread here: Hopefully that helps. Happy tweening.
    3 points
  2. Hi @DeuxAlpha Welcome to the forum. I'm not familiar with Inkscape so I have no idea how to control its SVG export settings, but you can always drop your SVG into a clean-up tool like SVGOMG https://jakearchibald.github.io/svgomg/ I'm not sure if you're just presenting minimal code in your question, but neither code snippet would actually draw a circle as you're missing some attributes. At a minimum you'd need a radius for the circle and usually a cx/cy if you don't want it at 0,0. Hopefully that helps. Happy tweening.
    3 points
  3. Hi @damonjentree Welcome to the forum. If I understand your question correctly, the DrawSVG plugin is made for that type of animation. Here's a fork of your pen: That would be the easiest way to animate the line and you wouldn't need a mask or clip-path. That is a Club GreenSock plugin, but you can try it for free on CodePen. Here's some more info about the club. https://greensock.com/club Hopefully that helps. Happy tweening.
    3 points
  4. Oh my gosh - this is exactly the shove I was looking for. I can't thank you enough!
    2 points
  5. Hi @flash08 I'm not sure, but I think you're asking how far along the x axis to place those other divs so they're off the screen at the beginning of the anmation? If that's the question, you could just check the width like this: var ww = window.innerWidth; Then just use that value in your tweens instead of your hard coded 960px. Hopefully that helps. Happy tweening.
    2 points
  6. do we know why dot.restart(true, true); still calls the onStart callback? You are basically saying "wait some amount of time before dot starts playing again". The amount of time for the delay is not part of the tween. The engine just knows to wait x amount of seconds before the tweens playhead starts moving forward. When it starts moving forward, the onStart is fired. when you suppressEvents you are only suppressing events that occur when the playhead is jumping past those events.
    2 points
  7. Sorry, but I have no idea what your demo is trying to show me. I see 46 lines of code with totally obscure variable names: a, tId, $t. Property names like a, divs with ids of t0 and t1. Empty functions that are being called and passed parameters that aren't even expected var tlineUpdate = function( ) { } var tline = new TimelineMax( { onUpdate: tlineUpdate, onUpdateParams: ['{self}', 'tline'] } ); and the end result is 2 nearly identical red squares moving across the screen at different rates. If you need further help please make rewrite your code in a way that someone who has never seen it before can read it and understand what it is supposed to do. Maybe make a #redBox and a #blueBox in a blueTween and redTimeline and tell us what each element is supposed to be doing and what they are doing that you don't expect.
    1 point
  8. Seems to work, though I'd put a updateRange() call at the end of your updatePosition() method just so that it updates the position of things when you click (and don't drag yet). Nice work. And yeah, I'm sure you could wire up an audio thing to GSDevTools if you needed to. Note that GSDevTools is responsive too, and fills the container (which is a whole different challenge).
    1 point
  9. @Greensock - Hey jack, I had another revisit to the problem and came up with this: Is there any caveats to this method, it appears to work but might not be correct. what do you think? many tnxs for your help
    1 point
  10. Also try refreshing Firefox... https://support.mozilla.org/en-US/kb/refresh-firefox-reset-add-ons-and-settings
    1 point
  11. That's called a closure. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
    1 point
  12. Hi @wooooosky I really haven't looked at the issue, but it shouldn't be related to the requestAnimationFrame loop. I've been noticing that Firefox behaves quite differently depending on the graphics card I use. An integrated one seems to perform better than a discrete one, which doesn't make a lot of sense. Performance can be improved by setting the visibility to hidden on items that are not inside the view port. That's probably a good candidate for using the Intersection Observer. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API https://github.com/w3c/IntersectionObserver/tree/master/polyfill That's what Scrollama.js uses. https://pudding.cool/process/introducing-scrollama/
    1 point
  13. @GreenSock Hi Jack, many thanks for the insight, I guess GSDevTools would be a more sensible option, but I just wanted to see if I could achieve something simply and also broaden my understanding of draggable. I think I get what you are saying so: 1. Seperate the scrubber and the bar logic 2. create a mousedown/touchstart/pointerdown event listener and do the logic for the bar 3. Use the scrubber to just control the timeline only I think I will give it another shot tnxs Jack
    1 point
  14. SplitText is a separate module. Please try this. import SplitText from "gsap/SplitText";
    1 point
×
×
  • Create New...