Jump to content


Popular Content

Showing content with the highest reputation on 01/03/2019 in all areas

  1. 3 points
    Hi and welcome to the GreenSock forums, Thanks for the demo. Instead of recreating the tween with different end values for x on each scroll I think you will be better off just creating the tween once and changing its timeScale() timeScale() allows you to adjust the speed of an animation animation.timeScale(0.5) // half speed animation.timeScale(1) // normal speed animation.timeScale(2) // double speed The demo below shows how you can smoothly adjust the timeScale of a timeline using an html5 input slider. You can normalize your scroll position values and pass them into the timeScale of your tween
  2. 3 points
    I believe this effect has been done with a WebGL library, it can be ThreeJs or PixiJs. This site was made by one of the members @jesper.landberg here of the forum. But you can use GSAP to animate the values that the Distortion Filter animation performs.
  3. 3 points
    hmm, this code is a bit unorthodox. Not sure why you are calling from() on tlSub and using that inside an add() for tlMain. Please try this for( var i = 0; i < chartContainer.length; i++ ) { tlSub.from(pathObject['pathElem'][i], pathObject['pathTiming'][i], {drawSVG: 0}, 0); } that will put all the tweens inside tlSub at a time of 0. If tlSub needs to be nested in tlMain, then after the loop you can do tlMain.add(tlSub) In the future, please consider making a demo. It will help us better understand what you are trying to do and provide accurate solutions. thanks
  4. 2 points
    Hi @OSUblake and @ShaunGorneau Thanks for both answers this is fabulous (and apologies in the delay in coming back to you both). Em
  5. 2 points
    you are using pixi.js so you need to set that in the app settings like: var app = new PIXI.Application( { view: document.querySelector("#canvas"), backgroundColor:0xff0000 });
  6. 2 points
    That site is using <canvas> and most likely some sort of displacement map animation. Please see this demo from @OSUblake (OPEN IN FIREFOX and mouseover image) you can get similar effects with SVG too:
  7. 2 points
    Hi @mikel That is exactly the effect!!! another year another success man! more success to be on your way. Thank you for your solution, you're pro. PS: if i need to add or remove images to the above? how do i go about that?
  8. 1 point
    if you comment out line 97 it seems to work as expected scrollStop(function () { // action.timeScale(1).play(); }); not sure why you are resetting timeScale(1) like that.
  9. 1 point
    Hi @namisuki, I have integrated another motif and for a better overview in the code an array for the motifs: var images = [ "url('https://tympanus.net/Development/BookBlock/images/demo1/3.jpg')", // tiger images[0] "url('https://tympanus.net/Development/BookBlock/images/demo1/4.jpg')", // deer images[1] "url('https://tympanus.net/Development/BookBlock/images/demo1/1.jpg')", // elephant images[2] "url('https://tympanus.net/Development/BookBlock/images/demo1/2.jpg')", // elephant images[3] ]; Some hints: the first motif is defined in the css the 2nd motive under iClick === 1 ... initial = current next = next last = the previous one that disappears under the stack Add another motif: complete the array with the url an additional condition if ( ... adjust in the previous the next image adjust: if (iClick> 3) iClick = 0; // "3" = total number of images - 1 Delete a motif: delete the condition for this motif adjust in the previous the next image adjust: if (iClick> 3) iClick = 0; // "3" = total number of images - 1 Just a little trial and error ... Good luck Mikel
  10. 1 point
    @yannick, I think rather than thinking of it as reverse (which is actually doing exactly what it should do ... reversing the playback with respect to tween timings as the playhead came to the end), you should consider a separate timeline to "start at 0" from the other direction. Here is a code pen illustrating both reverse() and a "pseudo" reverse (i.e. explicit tweens in the other direction). I've hardcoded some values for simplicity's sake (i.e. no value arrays or expressions to calculate element placements ... which I'm sure in a real world scenario would be likely). I also used set() vs fromTo() just to be more explicit. Hope this helps!
  11. 1 point
    This is because of the durations staggering the "complete" times of the respective tweens. They all start at 0 ... but end at various times. So a reverse of the timeline will respect when the tweens ended with respect to each other. Essentially, the tweens are left justified in a timeline (all start at the same point) ... what I believe you are asking is, on reverse, to right justify them in the timeline (all end at the same point) which would mean adjust their position properties to be the total timeline duration minus the tween duration. Instead of a reverse ... I think you may be looking for a new set of tweens.
  12. 1 point
    Hi @jingqi_fan, Just a try - not tested in all browsers ... Happy scrolling ... Mikel
  13. 1 point
    I'm not clear what you need to achieve but, I feel you could have all your addPause() calls lined up nicely if you were to always offset them by "+=0.01" relative amount of time. Then, they should all trigger, one by one and you should see no different in the animation as the amount of time they would add to the total timeline is negligible.
  14. 1 point
    We really try to keep these forums focused on GSAP-specific questions if at all possible because we just don't have the resources to provide free general animation consulting services, but it's okay to post a question here as long as you adjust your expectations (you might not get an answer). We do encourage the community to chime in and share knowledge and we want this to be a welcome place for all...we just try to manage expectations. Our goal is to underpromise and overdeliver
  15. 1 point
    Hi RolandSoos, I can't go over all of your issues in one go (my lunch break is only so long) Ops, someone got carried away and is being naughty at work... Problem #1, you said yourself, you are turnning off the supressEvent thus, whenever resolve#2 is clicked, the virtual playhead jumps from the second addPause() all the way back to time 0, passing over the first addPause(), triggering its callback. If you leave the suppressEvent turned on, you will have the behaviour you expect. Pause 1 -> Pause 3 -> Pause 1 -> Pause 3 etc... Problem #2, as you know, the addPause is a "zero duration" tween. So, you are adding two pauses on top of each other at the exact same timestamp. But, when the playhead hits that timestamp, GSAP only fires the first callback as it is based on a onComplete callback. The second addPause() never gets a change to run. When the user clicks on resolve #1, the playhead moves from that timestamp but the second callback is not fired because the it sits at the exact timestamp so, on the next GSAP tick, the playhead has moved away from it so, the onComplete call does not fire. If you were to add the second addPause with a miniscule offset, for example "+=0.01", it will fire when clicking on resolve #2. This example also has the supressEvents issue as responded above. So, you will need to adjust accordingly. Problem #3 builds on top of the concepts of Problem #2, the addPause is sitting at time 0 but it never runs because the timeline is already set to paused. Given that it never runs, the .then() part of the promise never gets initialized and thus, everything else falls apart. The workaround is the same as before, have the addPause() sit sligthly offset from 0, say 0.001, and things should work as you expect. Problem #4, is regarding the supressEvent, that you are disabling. Again, the addPause works off a onComplete call. The callback is firing in this case because you are removing the supression of events when the playhead is scrubbing around, not playing. When you set the timeline to play from 'test' onwards, you're scrubbing the timeline from 0 past the addPause() and then, GSAP starts playing from the label. The callback is fired because no events were supressed. Problem #5 is on the same vein as #4, where you are turning off the supression of events and scrubbing the timeline over those events thus firing them. Ultimately, the behaviour is as expected, but only IF you understand the callback in addPause() happens during a onComplete(), you cannot stack several of those on top of each other as only the first one will fire. You also need to have in mind the concept of "tick" in GSAP, where certain things happen at one "tick", then the playhead moves to another time position before the other "tick" running. Hopefully, this helps clear out your questions and you will be able to adjust the code to suit your needs.
  16. 1 point
    That works great. Thanks for your help! Good to know that about fromTo().
  17. 1 point
    Hi @namisuki, another year, another try ... Happy folding ... Mikel
  18. 1 point
    That actually has to do with the fact that the browser will always report the current (computed) values in px, so that's what the "from" value will be recorded as. Thus, when you reverse(), it'll end at that "from" (px) value. One way around that is to define it as a fromTo() tween so that you have control over that "from" value, like this:
  19. 1 point
    If anybody is interested in learning shaders, here's a good place to start. https://thebookofshaders.com/ Some of the functions available. http://www.shaderific.com/glsl-functions/ And a "simpler" demo to play around with.
  20. 1 point
    Congrats Professor Bowen! I see your flame demo in the Collective and the Awesome Demos of 2018. https://tympanus.net/codrops/collective/collective-478/ https://tympanus.net/codrops/2018/12/27/awesome-demos-from-2018/ Amazing work as always! šŸ‘
  21. 1 point
    Thanks! Here's the pen. And a tweet showing how to make fire with a shader. I'd be willing to bet that this could also be done with SVG filters. https://twitter.com/ciaccodavide/status/964407412634472448
  22. 1 point
    Hi @PinkMeNow, What is your reason to use <symbol> here? Information about <symbol> . You can name this object with the id = "dot" ... Attention: You use the same id 'smalldot' for several objects. Use 'smalldot' as class! More info Happy tweening ... Mikel
  23. 1 point
    If you use an array, you can use .filter() to filter out the last dot. // availableDots will be a new array without the lastDot in it var availableDots = dots.filter(function(dot, index) { return dot !== lastDot; });
  24. 1 point
    @emilychews One method would be to get all dots (by classname) into an array and generate a random number between 0 and the length of that array minus 1 (for the indexes available in that array) and tween the element randomly addressed. Here is a CodePen illustrating that. (note though that the Pen doesn't look to see if the random integer is different than the previous random integer ... which means the same dot could tween multiple times in a row) Hope this helps! Shaun
  25. 1 point
    Parallax is really all about perspective and scale. The further back something is, the more it's scaled down in size and movement. Here's the demo from that tutorial if you want to play around with it. Notice in the mouse move function how the x and y values for each layer are multiplied by an offset value, which is kind of like the scale value. function handle_mousemove(e) { // Mouse movement from center var dx = e.offsetX - (w / 2); var dy = e.offsetY - (h / 2); for (var i = 0; i < layers.length; i += 1) { var l = layers[i]; var _x = dx * assets[i].offset; // scale x movement var _y = dy * assets[i].offset; // scale y movement TweenMax.to(l.node, 0.1, {x: _x, y: _y}); } updateGradient(e); TweenMax.to(s.node, 0.2, {rotationY: dx / 10, rotationX: -dy / 10}); // rotate SVG node in 3D }
  • Newsletter

    Want to keep up to date with all our latest news and information?
    Sign Up