Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Leaderboard

  1. PointC

    PointC

    Moderators


    • Points

      2,608

    • Content Count

      3,351


  2. OSUblake

    OSUblake

    Moderators


    • Points

      2,134

    • Content Count

      4,290


  3. GreenSock

    GreenSock

    Administrators


    • Points

      1,993

    • Content Count

      13,201


  4. mikel

    mikel

    Moderators


    • Points

      1,080

    • Content Count

      893



Popular Content

Showing content with the highest reputation since 08/24/2018 in all areas

  1. 11 points
    Hello everyone, This post is going to be one of those a little long and for those more busy and timeless it is about: A person who had a dream and when he reached resolve to thank the people who helped reach that goal. Well let's go then: First, this was my first post on the forum: https://greensock.com/forums/topic/16437-animation-scale-left-to-right/ And on this date I still used Adobe Muse to make a website because I did not know anything about HTML / CSS, but I already wanted to be good, make sites cool, cool and one day I could gain recognition at Awwwards, so if you go see this post will see that mention a site that had just won this recognition. But it was impossible to win not knowing HTML and CSS, so I started to study and learned everything by scouring the internet inside, but something I was sure, to get there I would need to master doing Animations, so every day I needed to understand how it worked the GSAP. I was studying and creating new challenges and whenever I tried to do something and did not find the solution on the Internet, I was obliged to ask in this Forum, and at no time did I leave here without a useful answer, ready for me was very clear, I had found a source for learning and for evolution. So know that this is how I and many people see this forum. So after less than 2 years of many studies and many questions I finally decided to run my dream that was to gain a recognition at Awwwards, and to my surprise I did not only won as a Site of the Day but also the Developer award. A reason for much satisfaction and pride, and I certainly could not without the support, help of this incredible community, who always welcomes and helps everyone who comes here to seek a light for their goal. So thank you to all of you and as a form of gratitude and recognition I made a point of mentioning in the thanksgiving session of my website (http://victor.work) on the page about, because it is also conquest of you. (and also mentioned GSAP FORUM in my hobbies) So through all this I would like to let you know that you provide a very important role for the web community, a tool that we can evaluate as perfect and yet I see you doing the best and working hard to perfect it even more. Guys you are very importants. I'll leave the recognition link here at Awwwards: https://www.awwwards.com/sites/victor-work-folio19 Anyway, this is it: Thank you very much indeed, you guys are awesome.
  2. 7 points
    Hi Tiago, I made a pen simulating the transition of the site you mentioned. But first I think it is interesting to make some observations: 1) When you instantiate the Timeline and nest the Tweens one underneath the other, it is not necessary to put the name of the object every time, you can insert it only once. Like this: let tl = new TimelineMax() .to(...) .to(...) .to(...) // or let tl = new TimelineMax(); tl .to(...) .to(...) .to(...) 2) Since you are animating empty elements, I believe it is easier to animate using scale or xPercent, which will use transform () and have better perfomance than animating Left property 3) When you use Codepen you can insert the libraries directly into the Javascript Session, it becomes easier to manage the libs. Will take that to help you somehow. This pen:
  3. 7 points
    Hi, After many questions here, now it's time to see the result : https://jaiunsite.com/ thank you gsap !
  4. 7 points
    Probably a displacement map. Here's a good thread in which @OSUblake has a cool shader example. If you search the forum (or Google) for canvas, Pixi or displacement maps, you'll find some cool stuff. Happy tweening.
  5. 7 points
    If you can make it, GSAP can animate it. All that site is doing is animating a bunch of coordinates. A very simplified example.
  6. 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.
  7. 6 points
    Might want to check someone’s history, skill set, and experience before you accuse them of trolling.
  8. 6 points
    Using var isn't going to break the internet, but using let or const might. You don't want to be like this guy, now do you? Well, only on older browsers, but I get why they would teach you to use let or const. I use let/const on real projects, but I use var on these forums because a lot of people don't understand let/const yet.
  9. 6 points
    Hi @intelligence, Welcome to the GreenSock Forum. https://codepen.io/mikeK/pen/oRazzE Convinced? Happy tweening ... Mikel
  10. 6 points
    I'd imagine there would be a number of ways to make it happen. Depending on the complexity you need, canvas would probably be a good solution. @Sahil has a neat canvas demo with some trails. @OSUblake has a cool one using SVG. Happy tweening.
  11. 6 points
    It's telling you that tl is not defined because you have masterTl in your function. //switch this var masterTL = new TimelineMax(); tl.to(trail, 2, {alpha:1, rotation: 360}); return tl; //to this var tl = new TimelineMax(); tl.to(trail, 2, {alpha:1, rotation: 360, transformOrigin:"center center"}); return tl; Make that change and you'll be good to go. Happy tweening.
  12. 6 points
    Hi @Zaperela and welcome to the GreenSock Forum! Here are some helpful resources on CSS transform-origin: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin https://tympanus.net/codrops/css_reference/transform-origin/ https://teamtreehouse.com/library/changing-the-transform-position-with-transformorigin Even though SVG does not support 3D transforms at this time. That wont stop you like @PointC advised from separating your SVG into separate parts. Then you can wrap each SVG in a <div> tags and animate the <div> tags using 3D transforms. And here is just a simple example of swinging a door open and then closing it, so you can see the structure and use of transform-origin. But there are many ways to achieve what you want. Best of luck to you! Happy Tweening
  13. 6 points
    Your DOM code is pretty verbose, so I made another version with lit-html. I didn't do a reverse a animation, but you could do it the just like the open animation. You don't have to reuse or reverse the same timeline.
  14. 6 points
    I don't know of any specific problems in FF48, but isn't that a two year old version? Maybe tell the client to update their browser. I didn't really know where to look on your website. If you could make a demo, we can take a peek for you. Happy tweening.
  15. 6 points
    FreecodeCamp has a ton of material to get you from start to finish, not only on JavaScript but in general web dev plus more.
  16. 6 points
    Nope. It's pretty clear we're not gonna make it to the finish line here. This is what we needed. function onReverseComplete() { toggle = "closed"; } Now you can create and start a new timeline each time a box has reversed. This can be applied to your actual project now. You'd just substitute the image covers for the boxes in the timeline creation function. Here's the final version. I think @Dipscom & I have gone above and beyond with you on this project and it is apparent that additional training and practice is required here. I would strongly encourage you to visit the GSAP learning area and blog. Read through everything and really try to understand it. Practice more with your own small demos and projects. https://greensock.com/learning https://greensock.com/blog/ I'd also recommend some basic JavaScript training. There are loads of online resources for that. Best of luck to you.
  17. 6 points
    You were calling staggerFrom on elements with class 'element-span'. So each loop was adding same elements to the timeline which was creating conflict. You need to select children of current element instead of all elements.
  18. 6 points
    Sure, happy to help. Just in case my explanation of the easing was as clear as mud, I made a quick demo for you. It has three boxes that all tween 400px on the x and they all start at the same time. You can drag the slider to control the progress of the timeline. You'll see at 50% the Linear tween is exactly at the halfway point where you would expect it to be whereas the easeIn looks like it barely started and the easeOut looks like it's about finished. Hopefully that helps a bit. As @Carl mentioned earlier in the thread, you can upgrade to Shockingly Green to start using that MorphSVG plugin in the wild. Let us know if you have any more GSAP questions. Happy tweening.
  19. 6 points
    Hi @Pradeep KS, You'll need to set a hook somewhere on the client side to check against. There are a few ways to do that. If you are using server side code for anything, you could set a session variable on the first load, and then use the presence of that session variable to set a hook on the client side, for example ... <? $class = ''; if( $_SESSION['subsequent_visit'] ){ $class = ' subsequent-visit'; } ?> <body class="some-class another-class <? print $class;?>"> Which you can then check for before you create the timeline. Example if( document.querySelector('body.subsequent-visit').length < 1 ){ const tl = new timelineMax(); ... } Or, on the client side alone, you could set a cookie to check against, or a variable in local storage to check against. Hope this helps, Shaun
  20. 6 points
    I totally get that. People want to see eye candy, and not a lot of code. I always show this demo to people who don't mess with animations on a frequent basis. It does something that cannot be done with CSS alone, and is pretty simple. I spent less than an hour on it, and to my shock, ended up being the 16th most hearted pen of 2017.
  21. 6 points
    Some simple transitions that people find hard to do, you can live code these https://greensock.com/forums/topic/18904-transformorigin-help/?tab=comments#comment-87689 https://greensock.com/forums/topic/17978-try-to-do-block-reveal-with-diagonal/?do=findComment&amp;comment=82156 This one is simple but also has a bit more advanced demo by Blake https://greensock.com/forums/topic/18880-page-transition-with-barbajs/ Simple Add some simple morphSVG, drawSVG and split text effects, https://codepen.io/PointC/pen/aawwgx?editors=0010 https://codepen.io/PointC/pen/oPELMe Intermediate Motion blur using SVG https://codepen.io/osublake/pen/WZqBjV?editors=1010 Animate along the path, a bit pacman touch. You can also include your Mario https://codepen.io/osublake/pen/vWGGGv?editors=1010 FLIP using GSAP to animate flexbox https://codepen.io/osublake/pen/vWGGGv?editors=1010 Drag along the path https://codepen.io/osublake/pen/YYemRa Circlular clip path https://codepen.io/osublake/pen/QKEjwv?editors=1010 Handwriting hamburger https://codepen.io/PointC/pen/zLbxzO Movie rating slider https://codepen.io/PointC/pen/devBRB?editors=1010 Gooey Dial https://codepen.io/PointC/pen/oqeJbo Polygon snapping https://codepen.io/osublake/full/QdbQjN SVG Dynamic Text https://codepen.io/PointC/pen/jpEdBd?editors=0010 Advanced https://codepen.io/PointC/pen/LmOvEQ https://codepen.io/osublake/full/RNLdpz https://codepen.io/osublake/pen/XXbLer/ https://codepen.io/osublake/pen/dMLQJr basically all of Blake's popular demos. Ran out of time.
  22. 6 points
    Hi @jsciumi The problem is your intro() timeline. In that one you're targeting the individual characters with a staggered color animation. So when you go to animate the color of the words (the parent div of those characters) it won't work correctly because you've set the color at a more specific level. One fix would be at the end of your intro() timeline you can use clearProps to get rid of that color on the characters. Hopefully that helps. Happy tweening.
  23. 6 points
    Thanks for sharing Craig. It makes me feel like one of these days all this coding stuff is just going to click in and I will be off writing really good animations and text with less worry and doubt then I have right now. In the beginning it is really hard to form questions that make sense, when basically I don't really know or understand what I am talking about. Some of your comments made me smile as in ask but then figure it out on your own and keep rolling on. My first coding is that Java Script, and I'm doing simple animations and working toward more difficult ones. Here I was smiling saying hey, this isn't so bad no math, then as the lessons increase here comes the arithmetic marching in and I said "wow" not good I really suck at math. Never could understand that stuff in school and now to learn coding I need to understand algebra. I thought this it it the end I will never learn how X & Y equal numbers, but maybe I am a bit smarter now because the way I am learning makes it all somehow make sense. Anyways, just wanted to let you know through all my rambling on, that your words have given me courage to keep going and not give up. See you around the forum!
  24. 5 points
    Just to add (ha) to Zach's excellent advice. You'll often use the .add() method to add a label or a function (without parameters) to the timeline. The biggest use, at least for me, is building a master timeline and adding nested timelines to the master. Check out this great article for all the details. https://css-tricks.com/writing-smarter-animation-code/ Happy tweening.
  25. 5 points
    Hello @Goldendust20 and Welcome to the GreenSock Forum! I'm not seeing that "glitch" on Firefox and Chrome Windows 10. But if it was me I would convert your jQuery css() to the GSAP set() equivalent. So this way GSAP can keep track of what changes your doing outside itself: // So convert this jQuery css(): $list.add($clonedList).css({ "width" : listWidth + "px" }); // To this using GSAP set(): TweenLite.set([$list, $clonedList],{ "width" : listWidth + "px" }); Notice how i added multiple CSS selectors within the square brackets [ ] for the target parameter of the set method? GSAP set() : https://greensock.com/docs/TweenLite/static.set() Happy Tweening!
  26. 5 points
    Didn't you have a similar issue? Learn to use arrow functions. Very important if you want to keep your code to a minimum. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions You're mixing a bunch of stuff up. I'm assuming the draggableElem is just a single element. setDraggable(){ this.offsetLeft = $('.scrubber').offset().left; this.scrubberWidth = this.screenWidth; TweenLite.set(".progress", {scaleX:0, transformOrigin:"left"}); this.draggableElem = $('.vidcontrols-cursor') this.draggable = new Draggable(this.draggableElem, { type:"x", trigger:".scrubber", bounds:".scrubber", onPress: () => { TweenLite.set(this.draggable.target, {x:this.draggable.pointerX - this.offsetLeft/* offsetLeft: a class' property...*/}); this.draggable.update(); // why are you passing in this? We know what this is. this.updateProgressBarScale(this); }, onDrag: () => { // stuff here }, onDragEnd:() => { // stuff here } }); } df
  27. 5 points
    My two cent approach: https://codepen.io/PointC/pen/ardXWP Happy tweening.
  28. 5 points
    The worst thing is when you spend two hours visiting forums, rereading documentation, rewriting it ten different ways... end up convinced that you have no idea what you're doing and then you see it... but for the typo, what you had to begin with, was fine. 😵
  29. 5 points
    Yeah, I agree with Shaun, CustomWiggle would probably be the easiest approach:
  30. 5 points
    Try to use the timeline's onReverseComplete event. onReverseComplete on the stagger* callbacks will be fired on every subsequent tweens (for every box).
  31. 5 points
    You can get the element in the callback using this.target. Note that arrow functions aren't scoped, so you would need to use a regular function. // BAD onComplete: () => { console.log(this.target) } // GOOD onComplete: function() { console.log(this.target) } If you need the index, you can create the stagger in a loop. That's all GSAP is doing.
  32. 5 points
    It'd be super useful to see a codepen, as @Shaun Gorneau suggested, but I think I know what you're referring to and I'm sure there's a solution. Remember that in any animation, things update at certain intervals which very likely don't land EXACTLY on top of your start/end times of your animations. So let's say your animation is running backwards and it's ALMOST at the start, like at 0.01 seconds in, and then the next update the parent's playhead lands at 0.02 seconds before that animation's startTime. Of course at that time it'd fire the onReverseComplete...but remember, we're 0.02 seconds off, so if you jump to the end at that time, of course it'll follow your instructions but if you're expecting it all to be synchronized with other animations that don't have that 0.02 seconds offset, it ain't gonna happen. See what I mean? This is actually one of the things that makes GSAP special - we factor all of this in when we do repeats whereas most other engines simply trigger a restart onComplete (meaning those gaps/inaccuracies creep in on ever iteration and things get out of sync). In other words, they do it the way you're doing it (manually reset the playhead in a callback) which isn't entirely accurate. Solution: //you can use this in your onReverseComplete to factor in any time gap... //offset is how far the parent's playhead has moved beyond the start of the animation in reverse var offset = tl.startTime() - tl.timeline.time(); tl.time(tl.duration() - offset); There are actually a bunch of other ways you could do this too, but I don't want to overwhelm you Does this help? If not, please provide a codepen and we'll take a peek.
  33. 5 points
    Hi @Alan Kell, @OSUblake did the theory part ... Here practice examples: Happy tweening ... Mikel
  34. 5 points
    When you define a from tween, GSAP will set your element to that position and animate back to original position. So for example if your element is at 0 and you create a from tween with value of 100, GSAP will set your element to 100 and animate back to 0. If while creating the tween if element was at 50, then GSAP will animate from 100 to 50. If it was already at 100, then nothing will happen because start and end positions are same. I removed each because it was unnecessary. You can still use each and it will work. Also, with GSAP you don't need anything like jQuery's stop. GSAP overwrites any tweens for same property of the element by default. You can change the overwrite behavior if you ever need, check the docs. https://greensock.com/docs/TweenLite You can visit the learning page and youtube channel to get familiar with GSAP API, https://greensock.com/learning https://www.youtube.com/user/GreenSockLearning
  35. 5 points
    Hi @tsimenis, Since the cracks still dream of Thanksgiving ... Here, my suggestion // alternative list, if you want the "1" on the first left position list: ["10", "1", "2", "3", "4", "5", "6", "7", "8", "9"] // left: -itemWidth TweenLite.set(this.$refs.list, { left: -itemWidth }) Best regards Mikel
  36. 5 points
    Welcome to the forums, @Mmagic. I noticed a few problems... In your "restart()" function, you were looping through all the child animations and calling "restart()" on each instance, which basically rewinds them immediately, putting them back at their starting state. When you're using "from()" tweens, that means they'll all be at their "from" values at that point. And then you're creating all the from() tweens again...from those same values! In other words, x is 500 and you're tweening x to 500 (no change). That's why it looks like nothing is happening. It's just a logic flaw in your code. That's the most common mistake when people use "from()" tweens - they often forget that it uses whatever the current values are as the destination values which can cause logic problems (not a bug in GSAP). Imagine clicking a button really fast - if the user clicks when the current tween is partially finished, the current (destination) values are now different than the originals. It can get messy. Of course you can use fromTo() if you need to specify both starting and ending values. It's totally fine to use from() - it's just important to keep in mind how they work. Also, if you're trying to clear out a timeline... //BAD / WASTEFUL: TL.getChildren().forEach(tw => { tw.restart() tw.kill() }); //GOOD: TL.clear(); Also, you do NOT need to reuse timeline instances. It's not wrong/bad, but I often find that it's easier/faster to just create a new instance each time in cases like this. It probably takes more resources to scrub all the old stuff out rather than just creating a new one. Remember, GSAP is highly optimized for speed and it releases things for garbage collection on its own. Lastly, you could consolidate this code: //LONG: const tween = TweenMax.from(".wrapper", 10, { x: 500, ease: Power0.easeNone }); TL.add(tween, 0.5); //SHORT: TL.from(".wrapper", 10, { x: 500, ease: Power0.easeNone }, 0.5); Happy tweening!
  37. 5 points
    If you're trying to replicate just the menu, I don't know if using ScrollMagic is the best approach, or at least the one I'd use. Instead I'll recommend to use Draggable and ThrowProps plugin to control the animation. Here is a very simple example of controlling the progress of an animation using Draggable: https://codepen.io/rhernando/pen/Batoc Also keep in mind that Draggable has a trigger property that allows you to update the target element by using the pointer/click event somewhere else. In this sample you can move the blue square by dragging anywhere in the grey area: https://codepen.io/rhernando/pen/IiHgq Hopefully that helps you getting started. Happy Tweening!!
  38. 5 points
    I merged your questions to keep discussion in single thread. getBoundingClientRect gives you the position of element with respect to viewport. You don't see any problem with that because you are not using viewbox. Viewbox is attribute determines the SVG's internal co-ordinate system. In following demo you will see that viewbox is 200x200 but svg element is 500x500, so basically SVG is scaled up. Now when you use the getBoundingClientRect the horizontal distance between both rects is 250. Which is incorrect. getBBox ignores any transforms. Though I don't know why it isn't part of library or spec. You can read this another thread to learn more about all SVG weirdness:
  39. 5 points
    We built our site (and others) in React (https://www.elegantseagulls.com/), and haven't run into any performance issues. There are a lot of variables that go into performance, so without seeing the setup it's tough to give a clear yes or no.
  40. 5 points
    Hello @Jimmi Heiserman, To detect when an element is visible in the viewport you can try and use the HTML5 Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Happy Tweening!
  41. 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.
  42. 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.
  43. 5 points
    You can draw an emoji on a canvas, which means you can get image data for it.
  44. 5 points
    There are many ways to do this, but here's one: Basically, figure out the height based on the parentNode's change in height. Does that help?
  45. 5 points
    "t" can be named whatever you want. It represent the progress of the animation, so it can be thought of going from 0% to 100%. From Flubber's docs. var interpolator = flubber.interpolate(triangle, octagon); interpolator(0); // returns an SVG triangle path string interpolator(0.5); // returns something halfway between the triangle and the octagon interpolator(1); // returns an SVG octagon path string So you pass that progress value into flubber, and will figure out where the points on the shape should be.
  46. 5 points
    Hi @ainsley_clark, I'm not sure what your question is about. A reduced CodePen example would be helpful .... I assume it's about positioning. Here are some help and examples: https://greensock.com/position-parameter Best regards Mikel
  47. 5 points
  48. 5 points
    Hi @TradingBo What I did is not obvious, and there's probably not a lot of people that will understand why it works. To make the HTML cubes behave like the SVG, I wrapped the cubes in a container, and instead of changing the size of each cube, I just scale the container to match the scale of the SVG. That's the hard part, because getting the scale of the SVG isn't obvious. The .getScreenCTM() returns the transformation matrix of the SVG. When there is no rotation, this is what the values of the matrix represent. var matrix = svg.getScreenCTM(); matrix.a = scaleX; matrix.b = 0; matrix.c = 0; matrix.d = scaleY; matrix.e = x; matrix.f = y; Here's a demo where I demonstrate some of that. The gray box represents the view box of the SVG. When you resize your screen, you'll notice that matrix.a and matrix.d represent the scale of the view box, and depending on the shape of the screen, matrix.e or matrix.f will change. So knowing that matrix.a is scaleX and matrix.d is scaleY, I just plug those values into scale for the container. I also apply the scale to offset the x and y values of the container. I'm dividing by 2 because the transform origin for those values is 50% 50%. TweenLite.set(container, { xPercent: -50, yPercent: -50, scaleX: matrix.a, scaleY: matrix.d, x: -cubeSize / 2 * matrix.a, y: -cubeSize / 2 * matrix.d, })
  49. 5 points
    Sounds similar to what I did in this demo: You should be able to set up some triggers to animate the mask or change the color of the logo path(s) fill. The mask or clip-path route will probably be a bit better because during scrolling the logo could be straddling two sections of background colors and the mask could compensate for that. Happy tweening.
  50. 5 points
    I think it's just a problem with your timeline reference ... "this" won't reference the master timeline (or any timeline) in that scope. Try passing the timeline as a parameter,
×