Jonathan last won the day on January 2

Jonathan had the most liked content!

Jonathan

Moderators
  • Content count

    3,272
  • Joined

  • Last visited

  • Days Won

    121

Everything posted by Jonathan

  1. SVG Animations With No JavaScript

    Hello @SteveSargent and welcome to the GreenSock Forum! You can see here that SMIL is not widely supported and has been deprecated in many modern browsers. https://caniuse.com/svg-smil Chrome has it deprecated, but un-suspended it in 2017, but still SMIL was replaced by the web animations API and CSS animations which in itself is still not very compatible or very consistent. And you wont be able to use SMIL in IE or MS EDGE since its not supported. I really don't see you using SMIL unless you want inconsistent animations that wont work cross browser. You could use CSS animations but you wont have the control like you have with GSAP for complex transforms on the fly. But that is just my two cents. Happy Tweening
  2. Hello @mannycode and welcome to the GreenSock Forum! Looks like you were missing the jQuery JS and the TweenMax JS. You can add those by going to the JS panel. Click on the Gear icon and use the dropdown in codepen to add a JS library. This video tut by the mighty @Carl can help on how to add JS GSAP to your codepen: Happy Tweening!
  3. I could not see any flickering either or a line on the side. Pretty cool animations! Tested in Windows 10 in latest Chrome and latest Firefox
  4. infinite cube carousel

    @Lovestoned Yes technically you can use ThrowProps with Draggable. But the way it is setup now the drag only allows it to animate a certain distance. You would need to add the GSAP ThrowPropsPlugin (which is a Club GreenSock Membership plugin). Then you will need to add the GSAP ThrowPropsPlugin JS script and then add throwProps: true to the Draggable.create() parameters. But again you would need to change the functions of next and previous to go past their predefined distance of just moving to the next or prev slide. GreenSock allows you to use the GSAP ThrowPropsPlugin JS on codepen so you can play and test with it. But keep in mind that the GSAP ThrowPropsPlugin will only work on codepen and not outside of it.
  5. infinite cube carousel

    Hello @Lovestoned and welcome to the GreenSock Forum! Just to add to the Mighty @Carl and @Sahil great advice and examples! I made some quick optimizations so when you animate it animates each slide using matrix3d() instead of matrix() for a smoother animation, by adding a slight rotation of 0.01. Since i was seeing some jank (lost frames) on windows 10 latest Firefox when animating left or right. As well as adding the CSS transform-style: preserve-3d on the .slide CSS rule elements for cross browser compatibility and preventing some browser bugs. Happy Tweening!
  6. _doc.visibilityState on node.js

    Hello @adamco and welcome to the GreenSock forum! Can you please also give an example of your code, so we can see it in context. It will help others and the GreenSock Team in helping solve your problem to see what your trying to do with GSAP. Creating a reduced codepen demo example is the best way for us to help you with this. Happy Tweening
  7. setting perspective ignores z-Index

    Hello @hemmoleg that in your codepen you need to change z-Index to z-index.. all lowercase, so you don't have parsing errors in your CSS Also you should really look at not using a table for that markup, but best of luck.
  8. waves or corners ? - can you trust your brain ?

    Very cool @mi_cky i have never seen this type of illusion thingy, Thx
  9. waves or corners ? - can you trust your brain ?

    Hello @mi_cky Thanks for the codepen! Did you have a specific question about the GSAP API? Or are you just sharing your codepen? I'm a little confused on what your asking about either waves or corners. Happy Tweening!
  10. Gsap animation waves and distorsions

    You can find more about the GSAP AttrPlugin here: https://greensock.com/docs/Plugins/AttrPlugin
  11. animated text challenge

    The only other way to do that without an outside div with overflow:hidden; is to use a clip-path, or use pseudo-elements :before or :after. Which would only require one element but give you more than one element in the rendered page via generated content. But in my opinion for full cross browser its best to have a wrapper due to not all browsers behaving correctly with pseudo-elements.
  12. animated text challenge

    Hello @ericshew On that example they are animating SVG. So you should use the GSAP MorphSVGPlugin. https://greensock.com/morphSVG https://greensock.com/docs/Plugins/MorphSVGPlugin if you have a codepen example please post it above so we can see your code in context. In the below codepen, even though the shapes of animals are morphed, it is the same concept with shapes of SVG text or letters: Happy Tweening!
  13. Gsap animation waves and distorsions

    @DD77 The below example is just quick and dirty but you will get the idea: This is how you can use hover (mouseenter and mouseleave) using a timeline instead of just a tween.
  14. Gsap animation waves and distorsions

    Hello @DD77 You could try and use a SVG displacement map (feTurbulence). Here is an example using it with GSAP Happy Tweening!
  15. Animation Circle yoyo

    Hello @alessio and Welcome to the GreenSock Forum! You can find more info on transform-origin and CSS transforms here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms Happy Tweening
  16. Double scroll

    Hi @hanslibuzli GSAP taps into the RAF ticker requestAnimationFrame() web API. But the scroll event is firing before the RAF is fired, since RAF is fired on every frame tick, whereas the scroll event is fired at a very high rate. The best way to optimize scroll performance is with RAF like your trying to do but also taking advantage of debouncing. But you might want to look into this article by Paul Lewis regarding this https://www.html5rocks.com/en/tutorials/speed/animations/ You might also want to look at throttling the scroll event. Happy Tweening!
  17. Hello @hemmoleg By using target.style.transform matrix(), it will just set the transform with that matrix value. Which just applies a static transform. By using TweenLite.to() with your transform x, you are animating it. But in this case if the initial value of translateX() is 0, then using a to() tween to animate x to 0 so there would be no movement to animate. 0 => 0 is 0. Also the syntax is wrong for your to() tween, it is missing the duration parameter. See to() docs: https://greensock.com/docs/TweenLite/static.to() TweenLite.to(target, duration, vars, position); // wrong syntax TweenLite.to(target, {x:0}); // right syntax TweenLite.to(target, 1, {x:0}); But the equivalent to target.style.transform is really a GSAP set() method. Which is a zero based tween at its core. See set() docs: https://greensock.com/docs/TweenLite/static.set() TweenLite.set(target, {x:0}); Also keep in mind that when using GSAP that it does all the heavy lifting for vendor prefixes for various browsers and browser versions. For example if the browser is webkit.. the style.target.transform would be element.style.webkitTransform so you would have to use both. This way you can target both webkit and non webkit browsers. target.style.webkitTransform = "matrix(1, 0, 0, 1, 0, 0)"; target.style.transform = "matrix(1, 0, 0, 1, 0, 0)"; But GSAP does all that for you so you worry about animating and not cross browser compatibility. Does that answer your question? Happy Tweening UPDATE: I see you added a codepen thank you.. When GSAP animates i only see transform: matrix(1, 0, 0, 1, 100, 100); on the element inline style attribute.
  18. Double scroll

    Hello @hanslibuzli I only see like one line of GSAP ticker code. I am a little confused on what your GSAP specific question is?
  19. Draggable div incredibly slow to react when using iOS

    @Tebbott Your SVG is like 4.64mb. That is a very huge asset to be pulling in the page via an <img> tag. You might have to mess with the SVG viewport attribute, to reduce the perceived size to the browser to render. But again that is a HUGE SVG that your pulling in the page with many assets inside that SVG. iOS has a very limited memory to render your asset based on the memory usage for iOS devices. Android probably has very different memory requirement than iOS. It seems to be since your using an SVG instead of an actual image via the <img> tag. You should or could convert to an actual image, and you wont see that type of behavior in iOS, but still even a 4.64 image would do the same thing. Maybe slightly better but still, that is a lot of memory your asking to render and load. The 2-3 seconds to respond due to the high memory it takes to render the SVG when delivered in a <img> tag. See the following which goes over the spec regarding memory usage for SVG and limits in iOS devices. https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html That limit is probably why even the SVG inside the <img> tag has that hesitation to load that huge SVG file, since it could be treated like a bitmap. But even if it isn't, that is way too big for memory usage in iOS.
  20. Draggable div incredibly slow to react when using iOS

    Hello @Tebbott Thank you for reducing your example so we can see it. There will be differences between Android and iOS since both use different ports of webkit. So even though they both use webkit they have modified their own version of webkit to suit the needs of their different browsers (chrome and safari). That will mean that the CSS and JS can behave differently with various quirks and bugs.. or even different requirements to animate using transforms You might want to look at making it so the cars only animate when inside the viewport. That will cut down on the constant frame rate of animating elements that are not even in the viewport to be seen. So one way is to use vanilla JS and have a function that detects the viewport bounds like in this stackoverflow post https://stackoverflow.com/a/7557433/1203457 Or you can try and use the Intersection Observer API to detect the viewport bounds https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API https://pawelgrzybek.com/the-intersection-observer-api-explained/ Then you can simply pause() and play() your animation depending if your elements are in the viewport. Other than you might want to fork (copy) the codepen example you made and add a couple of the cars animating so we can see them animate in context to offer advice on how to optimize those tweens and or timelines. Thanks
  21. Scaling parent and child element

    Hello @hanslibuzli .. Regarding the trailing pixels that you see, that @OSUblake advised about. I cant see what your code is like, but i have seen this in webkit based browser before. You could try setting -webkit-backface-visibility: hidden; to that element. That usually helps with that sort of evil. If it doesn't help you might want to create a reduced codepen demo example
  22. How to "trim" a timeline ?

    Hello @multivac and welcome to the GreenSock Forum! Just to add my two cents.. if you were to use a timeline to repeat a background, then you should do it the GSAP way. This is done by creating a master timeline and adding child timelines via functions being returned with the add() method. And here is a helpful video by the Mighty @Carl explaining this technique in a video tut... Revolutionize your animation workflow: Part 1: Revolutionize your animation workflow: Part 2: Happy Tweening!
  23. Draggable div incredibly slow to react when using iOS

    Hello @Tebbott and Welcome to the GreenSock Forum! This type of thing is really hard to debug in a video, as well as trying to debug with your live development site, even if private. If you can create a reduced limited codepen example with just the GSAP code that is causing you issues and the elements they affect. This will allow us to debug your code in a live editable environment that we can see our changes in action. This will allow everyone in the community to help you to solve your issue faster. Happy Tweening!
  24. Happy new year ...

    HAPPY NEW YEAR GREENSOCK COMMUNITY.. May GreenSock be more prosperous in 2018 (sorry for the all CAPS.. im really not shouting at you all)
  25. GSAP: 1000 Posts

    Congratulations @Dipscom Pedro! I'm surprised you didn't create a bunch of confetti exploding with @OSUblake, @Carl, or @PointC face in each piece of confetti, thus starting another image face war. You will never get my real image face good sir