Leaderboard


Popular Content

Showing most liked content since 01/13/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
    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
  7. 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!
  8. 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!
  9. 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?
  10. 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
  11. 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.
  12. 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
  13. 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.
  14. 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!
  15. 4 points
    Ya those are for pure CSS animations, maybe you can use GSDevTools to debug what you are doing. https://greensock.com/gsdevtools
  16. 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 });
  17. 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
  18. 4 points
    Hi @hendrikeng, surely this pen gives you some suggestions. $ (this) is part of the solution ... Happy tweening ... Mikel
  19. 4 points
    Hi and welcome to the GreenSock forums, Thanks for the demo. Stuff like this where you want a bunch of different transitions on the same elements isn't always as straightforward as you might think. It can get kind of messy taking existing timelines and then trying to put them in different timelines at different times especially if you are reversing them. Once you put user interaction into the mix and let people jump to any state at any time it just gets complicated. For situations like this its probably better to create your animations on the fly. In basic terms you can create functions that create animations for animating certain elements out, and certain elements in. So you might call a function that creates your "AnimateLoadingOut" timeline and then call a function that creates your AnimateErrorIn timeline. You can glue the timelines that those functions create together into a parent timeline. Again, it isn't exactly easy to do or explain quickly. The article below is packed with information on the technique of using functions to create timelines. https://css-tricks.com/writing-smarter-animation-code/
  20. 3 points
    The trigger property might be what you're looking for.
  21. 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.
  22. 3 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.
  23. 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?
  24. 3 points
    Hi @anteksiler, Do you want this effect? Best regards Mikel
  25. 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
  26. 3 points
  27. 3 points
  28. 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
  29. 3 points
    Hi @hisco, Here's a little playing around - because I like coffee and enjoying the slowness ... Enjoy slow food animation ... Mikel
  30. 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.
  31. 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
  32. 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:
  33. 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
  34. 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
  35. 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.
  36. 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?
  37. 3 points
    Hi @OSUblake, Based on your pen (Motion Path Callbacks) I had this idea - still in progress: 'On foot' - that means: classically with my knowledge - I can control the process well. But your camera should be the next trigger ... Thanks and kind regards Mikel
  38. 3 points
    Hi and welcome to the GreenSock forums. The demo below should give you an idea of how something like that is set up http://fiddle.jshell.net/Zuriel/qGcd9/?utm_source=website&utm_medium=embed&utm_campaign=qGcd9
  39. 3 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.
  40. 2 points
    YAAAAASSS! Thank you so much for the quick response Sahil
  41. 2 points
    woooow Mikel did it again !!!! i would like to thank you alot , i am having hard time with javascript but with all the sample you provided, it s getting better, thanks a lot , i can move forward..or start in fact thanks a lot again .it s time to buy the greensock book for me
  42. 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.
  43. 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.
  44. 2 points
    Hi @jSwtch, Please take a look at this code: Also try a separate 'pulse' function for the startup animation. And - as an alternative: bind a hover function for the start animation to a container or maybe to window (?). Happy looping ... Mikel
  45. 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.
  46. 2 points
    Brilliant! Thank you for two extremely useful answers. I feel a bit duhh for not starting from the possibility that GSAP had its own debug tools already, but such is life...
  47. 2 points
    Thanks for the reply. Actually this looks pretty straight forward with three.js and low overhead so great tip thanks! Buzz
  48. 2 points
    I'll withdraw the question, but wanted to post the solution in case someone else runs into the same issue. I was able to use the forum to find a solution I could get to work.
  49. 2 points
    I thought your circle based camera was pretty creative. Unfortunately, it won't for every situation. Understanding how the camera I made is pretty simple. There are 3 components that you need to deal with. The viewport. The viewable area. What you can see. Basically a container, with overflow: hidden on it. The world. It should be larger than the viewport, and is the parent container for everything. The target. What you want to follow. It moves around the world. And the rest is basically just knowing how to center a rectangle inside another rectangle. For those that don't, or need a refresher... // Coordinates to center the smallBox inside the bigBox var x = bigBox.width / 2 - smallBox.width / 2; var y = bigBox.height / 2 - smallBox.height / 2; // Or even simpler var x = (bigBox.width - smallBox.width) / 2; var y = (bigBox.height - smallBox.height) / 2; We want the target to remain in the center of the viewport, so every time it moves, we'll need to update the camera. So start off by figuring out the coordinates to center it, just like above. The target is moving around the world, so we can't move the target to those coordinates. Rather, we need to find out how far away the target is away from those coordinates, and then move the world by that difference. That will move the target into place, and now you have a functioning camera! var x = (viewport.width - target.width) / 2; var y = (viewport.height - target.height) / 2; var dx = x - target.x; var dy = y - target.y; world.x += dx; world.y += dy;
  50. 2 points
    Hi, I re-found this library that was recently revamped and it appears to work in IE using intersect observer... demo: https://russellgoldenberg.github.io/scrollama/basic/ repo: https://github.com/russellgoldenberg/scrollama info: https://pudding.cool/process/introducing-scrollama/