Popular Content

Showing content with the highest reputation since 09/23/2018 in Posts

  1. 7 points
    The waark site appears to use a dom element that is the size of the window and loads all animated elements into it. Just a guess but because the content is the size of the viewport the document does not actually scroll it is likely using an event listener to activate animation using deltaY. See: https://www.w3schools.com/jsref/event_wheel_deltay.asp https://www.sitepoint.com/html5-javascript-mouse-wheel/ https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY With wheel events you can trigger animations with deltaY changes. Setup the container 100% high and wide with overflow hidden then you can place all animation content inside it and show hide and animate it to the deltaY changes.
  2. 6 points
    I'm not really sure what should be happening here, but you're creating your timeline every time you click the section 1 button. This is causing overwrites and everything will look funky. I think you meant to make the master a global variable and restart it on click. Please make these changes to the end of your code. $('#btn1').click(function(){ $('#c2').css('display','none'); $('#c1').css('display','block'); master.restart(); }); we3dxAnimation(); Happy tweening.
  3. 5 points
    Hi @kbeats, because we need each block to be controlled by its own timeline, we can't keep recreating var tl = new TimlineMax()... Because we'll just keep overwriting the `tl` ... potentially reversing the wrong timeline. So, we need dynamic variable names to hold the timelines. In PHP, we can do cool things like <? $something = 'foo'; $$something = 'bar'; print $foo; // -> bar // we can also do $i = 1; ${'something_'.$i} = 'Green'; $i++; ${'something_'.$i} = 'Sock'; print $something_1.$something_2; // -> GreenSock In Javascript, we're not so fortunate with the variable variables. But, in the global scope, when assigning var a = 1; we can get to the value of `a` with any of the following ... console.log( a ); console.log( window.a ); console.log( window['a'] ); So, seeing as `a` is a property of the window object (in the global scope), we see how variables can be declared that way too. Dot syntax doesn't help construct a variable variable because we can't use an expression for the property ( e.g. this.'something'+i just doesn't work ) But arrays allow strings as key values ... so we can use an expression there ( e.g. this['something_'+i] ). Soooooo, var tl = new TimelineMax(); Is the same as stating window.['tl'] = new TimelineMax(); which means var i = 0; window.['tl_'+i] = new TimelineMax(); i++; window.['tl_'+i] = new TimelineMax(); is perfectly valid for creating dynamic variable names .. and we now have tl_1; // a TimlineMax object tl_2; // another TimelineMax object and, in terms of if (!window[id]) { ... I'm just checking to see if it's been defined. If not, create the Timeline and control it. If yes, don't recreate the timeline, just control it. Hope this helps! EDIT *** After rereading ... I don't want to ignore what would be done within a function (i.e. not in the global scope) If we do the following .. var a = 1; function something(){ var a = 2; console.log( a ); } something(); console.log( a ); The console would show 2 1 because when something() is called, it in itself has a console.log which references the `a` in the local scope, outputting 2 ... and then the other console.log is called after that referencing the `a` in the global scope, outputting 1. But, we can create variable variables within the function just like I did above by declaring in the window object to then be addressable directly in the global scope or anywhere as a property of window. But if we just need variable variables within the scope of a function, we can also do function something(){ var i = 0; this['tl_'+i] = new TimelineMax(); i++; this['tl_'+i] = new TimelineMax(); // creating variables `tl_0` and `tl_1` within the scope of the function }
  4. 5 points
    If I understand you correctly, that's actually quite purposeful but it's easy to change the behavior to what you want. It should be as simple as setting: CSSPlugin.defaultSkewType = "simple"; Or on a per-tween basis: TweenMax.to(... {skewType:"simple", skewY:30}); From the docs: Does that resolve things?
  5. 5 points
    Hi @Jonathan, Yes, the Banksy approach is the proper reaction to many problems. So it would be helpful if I see myself in the mirror in the morning, it would be banksy-ed. Let's shred ... Mikel
  6. 5 points
    Hi, For all Banksy fans here the version a la GreenSock. It's a fork of a pen by Lee Martin, who reacted super fast. I like the art of Banksy. But I have not taken his original work. Otherwise this pen would definitely be hacked. Have fun ... Mikel
  7. 5 points
    Have you tried calling SVG technical support? That's just the nature of how strokes are drawn. The way I've dealt with that in the past it to animate the scale or stroke width from 0.
  8. 5 points
    Brilliant .. i love how Bansky keeps sticking it to the art establishment
  9. 5 points
    Firefox is the only browser that supports 3d for SVG, but it's very limited. You can wrap your SVG in a div, and animate the div instead.
  10. 5 points
    I can't access your site, so I can't see what's going on. GSAP doesn't do any rendering, so I don't see how this could be related to GSAP. Does your div contain SVG or complex fonts/text? That can be slow. Scrolling can be a bottleneck, and ScrollMagic isn't a GSAP product. https://github.com/janpaepke/ScrollMagic If you need something to be pinned, consider using CSS sticky positioning instead. https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning
  11. 5 points
    It depends on what you're doing. Animations that repeat can be difficult to manipulate from a master timeline, like here. If you need play/pause, you can do this. function pause() { for (var i = 0; i < myAnimations.length; i++) { myAnimations[i].pause(); } } function play() { for (var i = 0; i < myAnimations.length; i++) { myAnimations[i].play(); } } Check out this article. Lot's of good stuff in there, like tweening a tween (#1) and exportRoot (#6). https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca https://greensock.com/learning-gems MDN is kind of like the official documentation for web related stuff. I'm sure there are more in-depth tutorials out there, but this is a good start. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryListEvent https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
  12. 5 points
    Hi, Thanks for the demo. I think you want to use addPause() here tl.addLabel('step1') .to('.red', 0.5, {width:250}) .addPause() .addLabel('step2') .to('.blue', 0.5, {width:450}); you use pause() to pause a timeline at any time. The way you were using it you were pretty much pausing it as the timeline was being created. addPause() inserts a pause into a timeline at a specific point in time. more info here: https://greensock.com/docs/TimelineLite/addPause()
  13. 5 points
    When you set the transform origin for an SVG element with GSAP, it should look like this when you inspect the style. element.style { transform-origin: 0px 0px 0px; } The transform origin on your .au site looks like this. element.style { transform-origin: 0px center 0px; } If I manually change the eyes to use transform-origin: 0px 0px 0px; it works correctly. I don't know why the transform-origin is incorrect, but that's the problem. Make sure you're using the same SVG and code between both sites. I noticed the code in your .au file didn't have the same number of lines as your .uk file.
  14. 5 points
    That's because of this line in your each() loop. var active = TweenMax.staggerTo(".timeline-circle", '.6', {css:{className:'+=active'}, ease: Power2.easeOut}, '.1'); That will create an identical stagger tween for all the .fade-section elements that animates every .timeline-circle. So, when you hit the first trigger, all the circles animate. You want to only target the .timeline-circle contained within each particular .fade-section. Please try this: var active = TweenMax.to($(this).siblings(".timeline-circle"), '.6', {css:{className:'+=active'}, ease: Power2.easeOut}); If you want the text and circle to animate at the same time you can also change line 12 to this. timeline.add(fadeIn, 0).add(active, 0); Happy tweening.
  15. 5 points
    Hi @Faaiz, For fun of the joy ... And if it should be called by buttons: Happy tweening ... Mikel
  16. 5 points
    Hi @BeckBeach A mesh is like the geometry and the appearance/surface of something. Image an image. Now divide that image up into a grid. Each grid cell is split into two triangles. That's essentially what a mesh is. Animating a 2d mesh with PixiJS. The vertices are the corners of the grid cells, which are represented by the red dots. The vertices are stored inside a single array, which isn't a convenient object to animate, so I map the vertices to point objects. I then animate the point objects with GSAP, and then on every animation frame, map the point object values back to the vertices array. That might be easier to do with three.js, but the concept is still the same. You can animate the points (vectors) of a mesh. Check out this demo. It's not using GSAP, but it's the same effect you're asking about. This is what the burger looks like. They are using canvas to convert that image into a mesh. They loop through the image data, getting the rgba value of a pixel at a certain interval, and use those values to set the color and xyz value of a vector. To learn more about image data, check out this tutorial... https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas And this post... https://codepen.io/rachsmith/post/getting-getimagedata
  17. 5 points
    I think something like this would work: return Math.floor(Math.abs(i - (boxes.length - 1) / 2)) * 0.25; @Visual-Q it doesn't look like the formula you're using delivered the results @PointC was looking for, unless I'm misunderstanding.
  18. 5 points
    Hi and welcome to the GreenSock forums, GSAP doesn't natively do anything to output MP4 video, but there are a few tools out there that can scrape the rendered frames and create a video. This thread here is a good start, be sure to click on the links to other threads and demos
  19. 5 points
    Hi @ainsley_clark Your issue has nothing to do with GSAP. How are mouse events detected? The mouse has to be over the bounding box of the element. Your test element is listening for the events, and it doesn't have a height, which is part of the problem. If the mouse enters or leaves a child element, that event will bubble up to the test element listener. When one of the child elements rotate, the mouse might be inside the bounding box, but as it rotates more, the mouse might end up outside the box, triggering a mouse leave event. This should help you see the problem. I can position the mouse in such a way that it will infinitely play back and forth. To fix it, it might help if you give your test element a height, and set pointer-events: none; in your CSS for the children of the test element. BTW, you're not supposed to nest elements inside a heading element i.e. your h1.
  20. 4 points
    I notice two problems: 1) You've specifically coded it not to work when the field is empty: if (x != null && x.length > 0 && x.length <= 9) { So you should get rid of that condition or rework it somehow (I'm not sure exactly what you're trying to do). 2) oninput seems to fire before the new value is registered in the input, so maybe try changing it to: onkeydown="setTimeout(inputVal, 1)" We really try to keep these forums focused on GSAP-specific problems. General questions like this are probably better suited to a place like Stack Overflow. Happy tweening!
  21. 4 points
    Hi @zzwes Welcome to the forum. There would be a few ways to make this happen. Based on what you have so far, I'd probably create a timeline for each pizza and change the starting progress(). (Pretty much what you were doing). I then added each timeline to an array, loop through it and increment the progress of each timeline by +0.2. every few seconds. I've just used a delayed call to keep the animation going, but you could certainly add some interactivity with a button or draggable too. Here's a fork of your pen. You mentioned poor performance on mobile. Please keep in mind that GSAP is only animating values. All the rendering is done by the browser so you may still see less than desirable results on mobile with these images. Hopefully that helps. Happy tweening and welcome aboard.
  22. 4 points
    You're setting the strokeDashoffset as a CSS inline style, which has precedence over attributes. So you would need to set the attribute if you want to animate the attribute. TweenMax.set(path, { attr: { "stroke-dashoffset": 1 } }); My personal preference is to use CSS over presentation attributes so I don't run into problems like that.
  23. 4 points
    Hi @jp_uk81 Welcome to the forum and thanks for being a member of Club GreenSock. Since you want the gradient based on user scroll, I think in this case it will be better to create a second scene that animates only the gradient. Then you can focus on each section animation and whatever happens on those timelines without worrying about adding the gradient tween to them. I think something like this should work. If you were using the actual tween duration for the gradient change, then I'd say trigger it at each section. Hopefully that helps. Or at least points you in the right direction. Happy tweening and welcome aboard.
  24. 4 points
    The second seconds suggestion works perfectly, I also relied on Thanks OSUblake
  25. 4 points
    You can draw an emoji on a canvas, which means you can get image data for it.
  • Newsletter

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

    Sign Up