Popular Content

Showing most liked content since 01/14/2018 in Posts

  1. 5 points
    setInterval seems unnecessary because you can listen to event directly. Even that is unnecessary because on play you are listening to tick event and updating everything. GSAP uses requestAnimationFrame so it reduces update calls to 60 per second, that will be best way to go. Also the jQuery UI slider doesn't work on touch screen plus you are not using jQuery, so I think it will be better to go with draggable. In following fork, I have removed many unnecessary calls. If you can't picture what is updating what then writing down will be helpful. But don't worry about it too much even I write unnecessary code many times, just eliminating it simplifies your code. Lastly, for any reason if you feel like you need to use setInterval/setTimeout, I will suggest to go with TweenMax.delayedCall.
  2. 5 points
    It would be great if in cases like this you could reduce your demo so that it only includes the code necessary to replicate the problem. No need for loops and multiple timelines. It just adds an additional layer of complexity. Being that every time I ran your demo it gave different results of showing different images in different places my guess is that your javascript code is running before your images are loaded and thus the engine has nothing to take a height measurement from. Try adding height attribute to your images or waiting until all the images are loaded.
  3. 5 points
    Thanks for the demo. It seems you were passing bad strings into document.getElementById() You were passing in something like "#bird" as the SectionC param in sceneHelper(sectionA, sectionB, sectionC). when you called the function sceneHelper('#section1', '#owl', '#bird'); Inside of sceneHelper() you were doing var x = document.getElementById(sectionC + i).style.fill and the sectionC + i expression was evaluating as "#bird1" or "#bird2" etc. You can't pass the # into document.getElementById(), you just want to use "bird", "horse", "lion" I've probably made the same mistake a hundred times. Without changing a bunch of code just use: var x = document.querySelector(sectionC + i).style.fill
  4. 5 points
    Demo that fixes fast clicking, Demo with swipe only. I think to take advantage of all features of draggable, it will be a lot better to create a fixed rotating cube and change the images on the fly as it rotates.
  5. 5 points
    You need to think about what the loop is doing. It's running a hit test on EVERY element, so adding a class will only remain if the last hit test you run is true. If you drag something over the first element, you'll see that your code works. The loop is running backwards, so the first element is the last one you hit test. To fix the problem, you need to stop running the loop on the first hit test that is true. You can stop a loop by using a break statement. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break
  6. 4 points
    The trigger property might be what you're looking for.
  7. 4 points
    It was because you were updating canvas height n width on every frame, though I don't know why it should cause the issue. I also changed the implementation, so instead of using for loop I am using delayedCall and looping through one element at a time.
  8. 4 points
    Hi @dgu, If you update all necessary variables and functions after each new point, it should work - @OSUblakecould say something concrete. Here only roughly matched Best regards Mikel
  9. 4 points
    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!
  10. 4 points
    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!
  11. 4 points
    Ah, I think that may be a node-specific thing that's resolved in the next release which can be previewed (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js - is that better?
  12. 4 points
    Hi @jSwtch, The lines 14, 24 and 32 are not necessary - a little mistake ("invalid morphSVG tween value: [object Object]"). The function 'start' unintentionally (?) flashes some objects. Happy tweening ... Mikel
  13. 4 points
    Thanks a lot for doing that mikel! So helpful. @bparticle I'm in the same boat as Mikel, not really sure what the desired results are. It might help if you could provide a set of keyframes (static) for what the beginning, middle and end state should look like. I'm kind of assuming you want something that looks like an A to morph into a rectangle or square. The hollow part of the A is always going to give you trouble. I did a quick experiment by drawing something that isn't an A and putting a triangle over it For the the thing that looks like a sqaure (#end) I drew a square using the Pen tool starting in the top center and when I was done I added 4 additional points along the bottom so that the bottom points in the A thing had matching nearby points to move to. I also added an additional point in the top center of the A thing so that it would split the A in half and that point would go to the top-center of where I started drawing my box thing. The end result is this. The moral of the story. You may need to finesse things a bit. The morphing algorithm does what it finds to be most efficient. It can't always be what you want, especially with complex shapes with non-matching numbers of points. Note: I left the little triangle white so you can see it as an individual element. In real life it would match your background color.
  14. 4 points
    It was pretty trivial to figure out what is updating what. Actually you need to seek the audio so it will resume from exact time where slider is. So on click event I am setting current time to tl.progress() * audio duration. Also, check this thread as it states some browsers don't return duration so you have to listen to event when metadata is available. Maybe using a audio library will be more useful. https://stackoverflow.com/questions/11203773/how-can-i-get-the-html5-audios-duration-time
  15. 4 points
    BTW you can mimick those dev tools features just from console. Pause from debugger and it will pause ongoing animations. or enter TweenMax.pauseAll() in console and it will pause all ongoing tweens/delayed calls. TweenMax.resumeAll() to resume everything. TweenMax.globalTimeScale(0.5) to slow down everything that GSAP does and TweenMax.globalTimeScale(5) to speed up.
  16. 4 points
    I just posted my first question. Then I was browsing the forum and saw your post. I hope to be writing a post like this in 12 months. Awesome, Inspiring & Motivational. Thanks!
  17. 4 points
    Ya those are for pure CSS animations, maybe you can use GSDevTools to debug what you are doing. https://greensock.com/gsdevtools
  18. 4 points
    There is no width here. var anchoMenu = -elMenu.width(); $("li").css("transform", "matrix(1, 0, 0, 1," + anchoMenu + ", 0"); And it would be better to let GSAP handle setting the transform if you're going to animate it. elMenu.css("width", "100%"); var anchoMenu = -elMenu.width(); elMenu.css("width", 0); TweenLite.set(lineas, { x: anchoMenu });
  19. 4 points
    Hi @cfx GSAP is an animation engine, and does not handle rendering. You could certainly use GSAP to animate the particles in that demo, but you would still need to write all the code to handle the creation and rendering of the particles. In short, the hardest part of that demo is the rendering, and there is no easy way to do something like that. The amount of code would probably be the same if GSAP was used to handle the animations. The biggest problem I see with that demo is that it's using a 2d canvas to do 3d rendering. It's doable, but far from optimized. It would be much easier, and faster to create something like that using three.js. Once you have something that can be rendered in three.js, it's very easy to animate it using GSAP. https://threejs.org/ https://github.com/mrdoob/three.js
  20. 3 points
    Hi @jamesg It's always helpful if you can put what you have in a simple demo. It doesn't have to be pretty, or even working. Just something we can experiment with. For this, I would probably morph the lips as a mask or clip path for a group element (<g>). In that group, I would put a darkblue rectangle to give it a background color, and for the mouth, well it probably doesn't need to be morphed. The mouth shape could probably be left as is, but move it down on the y-axis so it's not visible in the starting state. You could also scale it down a bit if needed. And to animate it, just morph the mask or clip path while moving the mouth up. But that's just one way to do it. There is no correct way. And animating masks and clip paths have their own little quirks, so you should test to see what works best. If you haven't already, check out the SVG Gotchas thread. It has some good tips on working with masks and clip paths.
  21. 3 points
    Oh, I haven't used Angular 1 in a long time. The problem is that you are creating all the animations inside a directive, which reference other directives, which might not be ready. So you're basically creating 3 timelines with 3 animations each, for a total of 9 animations. That of course isn't correct. A parent element should do that if you're trying to create a timeline, but only when all the child elements are ready. For this it would be better to use latest version of Angular 1, and use components instead of directives. https://docs.angularjs.org/guide/component So you should create a parent component for the voices components, and then inside the $postLink hook of the parent component, create the timeline and animations. I don't have any demos that do something like that, but here are a couple of demos that use components. And here are a couple good articles on using components and hooks. https://toddmotto.com/exploring-the-angular-1-5-component-method/ https://toddmotto.com/angular-1-5-lifecycle-hooks
  22. 3 points
    Yep. That's clearing and resetting the entire canvas. Setting the width and height attribute changes the internal dimensions of the canvas. And it's faster to set it directly. // This does the same thing... $("canvas").attr({ width: page.w, height: page.h }); // as this... canvas.width = page.w; canvas.height = page.h; One thing that is confusing about canvas is understanding width and height. Changing the internal size is different than setting the size with CSS. Changing the size of a canvas with CSS causes it to scale, just like an image. To match the resolution of HiDPI screens, like retina and phone displays, a resize should actually look like this. var resolution = window.devicePixelRatio || 1; // size/resize the canvas canvas.width = page.w * resolution; canavs.height = page.h * resolution; canvas.style.width = page.w + "px"; canvas.style.height = page.h + "px"; context.scale(resolution, resolution); And there's some other stuff that isn't needed in the code, like setting the globalCompositeOperation to source-over. That's the default. And the closePath() call isn't needed if you're drawing a circle. closePath() is the same thing as the "z" command on an SVG path.
  23. 3 points
    You're placing a bunch of unnecessary restrictions on your animation. And I see transforms in your html that do the same thing as xPercent/yPercent. Transform origin does not affect x and y. If you want to move something from the center instead of the top left corner, then offset your points half the width and height of the object your animating.
  24. 3 points
    Somebody touched on monitoring performance in this post... But if performance is a problem, you probably need to change what you're animating. If you're messing with SVG or HTML, you should look into using canvas or WebGL. And taking a page from game development, there's a reason some games are capped at 30fps. Animations will appear smoother running at a constant 30fps over a framerate that is constantly changing.
  25. 3 points
    Looks like you've just got an error in your code - your querySelector() isn't finding anything because you're missing a "#", thus there's a runtime error being thrown when you try to call cloneNode() on a null object //BAD: document.querySelector('wrapper') //GOOD: document.querySelector('#wrapper'); Does that help?
  26. 3 points
    Hi @anteksiler, Do you want this effect? Best regards Mikel
  27. 3 points
    Hi @dgu, If you just change the path (id = "path"), the drag function works as desired. Is this your point "by adding points manually"? Happy dragging ... Mikel
  28. 3 points
  29. 3 points
  30. 3 points
    Hi @dgu, I am not sure if I interpret your question correctly. Could you represent your intention a little more concrete - preferably with a CodePen: What means 'manually ' for you? best regards Mikel
  31. 3 points
    Hi @hisco, Here's a little playing around - because I like coffee and enjoying the slowness ... Enjoy slow food animation ... Mikel
  32. 3 points
    Your timeline and draggable were competing against each other to control the same element. I have removed timeline and updated next/prev events. Though there are still issues, like if you click quickly, resize etc. But this should point you in right direction.
  33. 3 points
    Hi @mikel & @OSUblake. Thank you for the great examples, i made it work, and it works incredibly well. I will make sure to post a link, gif or small video when its done Huge thumbs up from here! - Plenge
  34. 3 points
    Glad you got it working. Yeah, SVG sounds like a good fit for this. Not really sure what you need for the colors, but if you want a random color on each mouseover you could randomly pull from an Array like:
  35. 3 points
    Hi @bparticle, I looked at the individual parts of the SVG. https://codepen.io/mikeK/pen/5640f95d0efe846102b806e64b98a5dc/ It is difficult for me to imagine what intermediate levels or which final "picture" should arise. One way to control morphing is if both paths contain the same number of anchor points. Best regards Mikel
  36. 3 points
    If you Fork that pen, you then have a pen that loads all the premium plugins. You would just need to add your own code at the point. Another option is you can create a new Pen from scratch and load the tools you need with the urls of the scripts you need. Here is a pen you can fork that loads MorphSVG and TweenMax Run Pen Edit on CodePen Fork Add your own code Save Paste link in reply
  37. 3 points
    It's hard to say without knowing what you're doing, but figuring out the actual offset might be better than messing with the transformOrigin.
  38. 3 points
    Here is similar thread that suggests to animate transformOrign by using onUpdate callback. See if that helps. @GreenSock any plans to bring smoothOrigin to html?
  39. 3 points
    Hi @hendrikeng, surely this pen gives you some suggestions. $ (this) is part of the solution ... Happy tweening ... Mikel
  40. 2 points
    Hi @benoit, super ... - I like it! Best regards Mikel
  41. 2 points
    Hi @jamesg, You have a lot of possibilities. Use the hints of @OSUblake. Here is a little suggestion: Happy morphing ... Mikel
  42. 2 points
    I'm also wondering if a pattern might work here. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns
  43. 2 points
    Nice! You should also check out this thread for a simple three.js plugin.
  44. 2 points
    There are a ton of browser inconsistencies and "gotchas" when animating SVG with CSS. For example, transform-origin issues: https://css-tricks.com/svg-animation-on-css-transforms/. There are many, many more that GSAP solves under the hood. Another example, IE and Firefox both have bugs that affect progressively drawing SVG lines, measuring path length, and Safari can leave rendering artifacts in certain cases. I'm curious: why did your client disallow JS for the animations? I'm biased of course, but I think it's a pretty bad tradeoff to dump JS for buggy (and headache-prone, verbose) CSS. Are they concerned about security or something?
  45. 2 points
    GSAP has some built-in mechanisms to adjust for lag on-the-fly. Take a look at the videos and info on lagSmoothing() here: https://greensock.com/gsap-1-12-0 If you still have questions or problems, let us know. Unfortunately, there is really only so much you can do to make things look nice while you are hammering the processor.
  46. 2 points
    and also go through a few pages of @OSUblake's public CodePen demos: https://codepen.io/osublake/pens/public/ Lots of spliney stuff in there.
  47. 2 points
    You might want to keep an eye on this one: https://spiritapp.io/ (we aren't directly involved in that, but it looks interesting). We've heard of a few other ones that may be in the works from others, but nothing solid yet.
  48. 2 points
    Glad you found a fix. Not really sure what you mean by specifying more states, I'm guessing you could draw those states and morph to each one sort of like we do with the hippo demo in the docs: I noticed also you are using a SteppedEase config value of 1.8, you should use integers.
  49. 2 points
    @Sahil Many tnxs for your solution. it is exactly what i was looking for
  50. 2 points
    What makes you think animating something on hover would be hard? You can do some interesting stuff with SVG filters, but there's only a handful of them, and they can suffer visually due to aliasing issues. I made that ripple animation with SVG just to see how it would look, but it was originally done with PixiJS. If you're looking to bend, twist, and distort stuff for an animation, then you should definitely check out PixiJS. They have tons of filters that can do all sorts of craziness, and they're constantly adding new ones. I just noticed some new ones have been added over the past couple of weeks. 💥 AdjustmentFilter 💥 CRTFilter 💥 GlitchFilter 💥 ReflectionFilter 💥 KawaseBlurFilter 💥 RadialBlurFilter 💥 MotionBlurFilter 💥 OldFilmFilter Go through and play around with all the filters here. You should be able to find several filters that could be used for your project. http://pixijs.io/pixi-filters/tools/demo/ And to help out, GSAP has a plugin to make animating things in PixiJS much easier.