Jump to content
GreenSock

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

Leaderboard

  1. PointC

    PointC

    Moderators


    • Points

      2,306

    • Content Count

      3,464


  2. OSUblake

    OSUblake

    Moderators


    • Points

      2,292

    • Content Count

      4,704


  3. GreenSock

    GreenSock

    Administrators


    • Points

      1,953

    • Content Count

      13,502


  4. mikel

    mikel

    Moderators


    • Points

      1,041

    • Content Count

      956



Popular Content

Showing content with the highest reputation since 10/22/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. 9 points
    Ya there is a lot of code that I am not even sure what is the purpose of that. You are using container's height and width to calculate progress of tweens based on where the cursor is inside the container. Now your container can be a div or window and you need to know how using either affects the implementation. First thing you need is to position your elements where you want them when mouse is at center and from that position eye will translate. You can't use pageX in your actual project because if you scroll it will throw off your calculations. You need to calculate mouse position like I did if your page scrolls. You also need to reset value of rect on resize and scroll event. Figuring out how much the eye should move doesn't need all that calculation, you can just use a number based on radius of your circles.
  3. 8 points
    It's not a bug. That's what happens when you interrupt a from animation. If the scale is at 0.1 when you interrupt the animation, it's going to animate the scale from 0 to 0.1. Try this. // You can set this when mounted TweenLite.set(".es-bubble", { transformOrigin: 'bottom bottom', }); TweenMax.staggerFromTo('.es-bubble', 1, { scale: 0, opacity: 0, }, { scale: 1, opacity: 1, ease: Elastic.easeOut, // force3D: true // doesn't work on SVG }, 0.1)
  4. 7 points
    Might want to check someone’s history, skill set, and experience before you accuse them of trolling.
  5. 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:
  6. 7 points
    Hi, QuickTip of the day ... just do it ... Mikel
  7. 7 points
    Don't set transform and transform-origin in your CSS for SVG. It will not work in every browser, especially transform-origin. By default, GSAP uses the transform attribute for SVG elements. CSS > attributes. GSAP is correctly setting the transform, but your CSS is overriding it.
  8. 7 points
    Hi, After many questions here, now it's time to see the result : https://jaiunsite.com/ thank you gsap !
  9. 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.
  10. 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.
  11. 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.
  12. 6 points
    Hi @intelligence, Welcome to the GreenSock Forum. https://codepen.io/mikeK/pen/oRazzE Convinced? Happy tweening ... Mikel
  13. 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.
  14. 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.
  15. 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
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. 6 points
    PS Check out my thread on circles along a path using stroke-dasharray. It's easier than creating all those individual circles. Happy tweening.
  21. 5 points
    You're welcome! As for ongoing questions ... if they're pretty much related to the title of this post, then following up here is just fine. If it's a new topic altogether, it would be best to create new post with a title relevant to the question at hand. That keeps threads shorter and entirely relevant. That said, feel free to ask as many questions as you like! Someone is sure to jump in and offer help or advice. As far as ScrollMagic .. you may get some pointers, but that is not a GSAP product, so you may not get an answer specific to your issue (if you have one). Happy tweening!
  22. 5 points
    Hey @lzy100p, Maybe you try the AttrPlugin: https://codepen.io/mikeK/pen/QXXNJj Happy tweening ... Mikel
  23. 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.
  24. 5 points
    Hey @lzy100p, Clip-path is not a feature that all browsers support (that has nothing to do with GSAP): https://caniuse.com/#feat=css-clip-path Kind regards Mikel
  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
    I would agree, maybe consider using the plane effect only once and make it a bit quicker. https://codepen.io/Visual-Q/pen/oROYow
  28. 5 points
    My two cent approach: https://codepen.io/PointC/pen/ardXWP Happy tweening.
  29. 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. 😵
  30. 5 points
    Yeah, I agree with Shaun, CustomWiggle would probably be the easiest approach:
  31. 5 points
    There are few things to do to make something like this happen. Manipulate the DOM to make a duplicate of each image to allow each "cloud" to loop. This means creating a wrapping container, cloning the cloud image and appending it to the new parent wrapper. Some CSS to make sure the containing wrapper is twice the width of the cloud it's containing. Tween each cloud wrapper by 50% of its width and repeat that tween indefinitely. Set the duration of each such that the closer clouds move by quicker and each layer back is slower than the previous. Hope that helps!
  32. 5 points
    Hi @Kamran, Depending on if you are using hashes ... this might get you going. All boils down to the onhashchange. https://stackoverflow.com/questions/25806608/how-to-detect-browser-back-button-event-cross-browser
  33. 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).
  34. 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.
  35. 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.
  36. 5 points
    Where you are using add() to inject the tween/timeline and set a label ... try creating labels with their own add() and using the position parameter to offset which ever tween/timeline you like. Here is a code pen illustrating that, Hope this helps!
  37. 5 points
    Hi @Alan Kell, @OSUblake did the theory part ... Here practice examples: Happy tweening ... Mikel
  38. 5 points
    Hi @smallio, I am not sure what exactly you want to achieve. Maybe the deep sleep has already brought a result. Here is a fork of a pen of @OSUblake - pen. Have a good start in the day ... Mikel
  39. 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
  40. 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
  41. 5 points
    @Sahil @GreenSock Super helpful! Thanks again! Sahil, your CodePens are amazing, inspiring, and very easy to follow, just wanted to give you an extra thanks! I ended up using ticker for the animation I'm working on I posted it on the other thread, but will here as well in case someone stumbles on this.
  42. 5 points
    I don't see how you can morph shape A into shape B and keep the original shape A on screen without duplicating that path data in the SVG as Blake illustrated. Perhaps you can better explain what you would like to have happen or how GSAP would do this for you. Something to note that is semi-related and not a solution to your problem is that GSAP puts a "data-original" attribute on the target of your morph so that you can easily morph back to the original shape. the data-original attribute stores the original, pre-morph, path data var tl = new TimelineLite({onUpdate:updateSlider}), circle = document.getElementById("circle"); tl.to(circle, 1, {morphSVG:"#elephant"}) .to(circle, 2, {morphSVG:"#circle"}, "+=1")
  43. 5 points
    If this is what you're trying to do, then ridiculous seems like a good option.
  44. 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!
  45. 5 points
    I was overthinking I guess, here is similar effect using Bounce.
  46. 5 points
    In order to use CustomBounce, you also need CustomEase. And yes, they should both work in Animate CC. The demo Sahil provided should be plenty though for you to experiment and get the exact effect you want. I'm not really sure what that is, but here is another using a yoyoEase which allows you to specify any ease you want for the "reverse" part of a yoyo animation
  47. 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!!
  48. 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:
  49. 5 points
    You need to host it somewhere. Your own domain n server or some third party site that lets you access it. Most users with amazonaws.com links have codepen pro account that lets you save different types of files. That being said, please keep your questions related to GSAP only. On stack overflow you will get a lot of downvotes but you will find some helpful groups on facebook. You can also join this slack group for such unrelated questions. https://damp-lake-50659.herokuapp.com/
  50. 5 points
    @jesper.landberg was working on something like that.
×