Jump to content
GreenSock

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

Leaderboard

Popular Content

Showing content with the highest reputation on 07/01/2021 in all areas

  1. Hi dagangyang! Not sure how you want that to work, but if you want to combine both, you should probably have a certain area to trigger the rotation. GSAP Drag and Rotate (codepen.io) Using vectors. GSAP Drag, Rotate, and Scale (codepen.io)
    5 points
  2. If you want the dragon to fly in both directions, here is an example: https://codepen.io/mikeK/pen/KKWNvNL Happy scrolling ... Mikel
    4 points
  3. Hey @Peach2tm, There are different options / ways. Here are a few https://codepen.io/mikeK/pen/3e1f3430764662349f3009efbfa2c064 Sorry it is still the old GSAP syntax! Happy tweening ... Mikel
    4 points
  4. Heya! - So that path it's following is a shape with a stroke all the way around it. The toilet paper is following the stroke around the shape. https://codepen.io/cassie-codes/pen/e79d8f7c17c8a5bf164fcbb6b769048f You'll need to redraw that path so that it's a single stroke without a fill. Shout if that doesn't make sense and I'll find you an article or something
    4 points
  5. Hey, you could use advanced stagger. gsap.to(".box", { y: 100, stagger: { // wrap advanced options in an object each: 0.1, from: "center", grid: "auto", ease: "power2.inOut", repeat: -1 // Repeats immediately, not waiting for the other staggered animations to finish } }); Happy staggering ... Mikel
    4 points
  6. Hey pal - Staggers are a good way to 'offset' the elements. You can also use random values. Does this help? https://codepen.io/cassie-codes/pen/f5b72843034a3bc63f179eba9589b15f
    4 points
  7. @mikel's approach has all the bells and whistles. this reminded me of a tutorial I have on using addPause() it uses next and previous buttons to navigate through a simple timeline that has addPause() calls added after each number animates in. https://codepen.io/snorkltv/pen/oNXNEJQ Your post prompted me to explore adding an autoPlay feature to that demo. My initial autoPlay solution was similar to Mikel's where I'd check if autoPlay was true and if so I would just continue playing. In the context of my demo it just made the timeline speed by with each number coming in and out in rapid sequence. I added a feature that when autoPlay is enabled the timeline would hold on each section, show a progress bar, and then move to the next animation when the time expires. https://codepen.io/snorkltv/pen/5e63e8b990367720da762db0a16d84ac?editors=0011 In the demo above hitting next or prev will disable the autoPlay feature and the user can navigate at their own pace. When the timeline ends autoPlay is automatically disabled and the user can either hit next or autoPlay to restart. This will most likely be covered in detail in a new CreativeCodingClub.com lesson in the near future. In the meantime, hopefully these demos from Mikel and I help.
    3 points
  8. Thanks, that draggable plugin fits the bill perfectly... I can now pause the timeline, move & resize elements and un-pause the timeline
    3 points
  9. Hey, It will be really helpful if you can create a sample demo of your task. Read this on how to create demo.
    3 points
  10. @sam_tween_journeyer hey, Here it is with scroll trigger. https://codepen.io/tripti1410/pen/rNmVymx?editors=1010
    3 points
  11. Hey @alal111 On the one hand, it is much easier to combine all the elements in the SVG. And: a path can easily be coded by hand. https://codepen.io/mikeK/pen/yLbNOLV?editors=1010 And for the scroll-effect you could use GSAP ScrollTrigger. Happy tweening ... Mikel
    3 points
  12. Hey Jami - welcome to the forum. My suggestion to handle that would be this: Initially Take the total scroll-duration of your ScrollTrigger (3000) and store it in a variable get the total amount of your slides get the amount of scroll each slide takes up - total scroll amount / number of slides also get half of that amount for each slide - which will come into play later, as you have two different tweens with a duration of 1 for each slide Then for each link of your nav, get the slide to go to - maybe with help of / via that data-attribute you have on the parent li-element minus 1. And lastly in the scrollTo get the offsetTop of your container ( you actually want to get the offsetTop of the parentElement of the container, since it will be wrapped in a pin-spacer) plus the ratio for each panel times the slide to go to plus that second ratio I mentioned (since you want that fading in tween to be done and otherwise you would get to the point before that fading in happened and thus you would have a blank slide). Hope this will help.
    3 points
  13. Hi DLong! Not sure I completely understand what you're asking. Tweens don't go on forever. To make something go on forever, you would probably have to use a ticker, and it would be much more complicated. The easiest solution might be to use larger random values. Shatter Effect GSAP 3 (codepen.io)
    3 points
  14. I agree with @Cassie - it's almost always better to animate an actual image with scaleX/scaleY/x/y but I went ahead and enhanced the helper function to have several new features. You can define a config object where you can set size, nativeWidth, and/or nativeHeight. It handles percentage-based values too. Here's a fork with that function in place: https://codepen.io/GreenSock/pen/BaRNZxm?editors=0010
    2 points
  15. Just droppin by to say I love this little dragon pen. 👀 This looks like it's for a cool project - do we get to see when it's finished?
    2 points
  16. hey @sam_tween_journeyer, Welcome to the GreenSock Forum. Hmm - I don't know what your construct is about. Here is a simple version with GSAP ScrollTrigger. https://codepen.io/mikeK/pen/MWmwpWN That means convenience. You just use what you call up in the code. Happy scrolling ... Mikel
    2 points
  17. Just checking if you've seen draggable? If you'd rather stick with the core of GSAP, I reckon you'll need to create some sort of loop with gsap.ticker() to constantly update the coordinates when the element's being dragged. Obviously as we have a plugin that does this it would be a little out of the scope of these forums to craft custom interaction for you! But anyone else is welcome to jump in.
    2 points
  18. That's very easily done. I suggest giving the docs a read to find out which values to tweak - you can find them here - motionPathPlugin https://codepen.io/cassie-codes/pen/bc4d022311889462ab769042e8cc8152?editors=1010
    2 points
  19. This should help! https://codepen.io/GreenSock/pen/XWXpjjo
    2 points
  20. Hey @Peach2tm, Welcome to the GreenSock Forum. If you want an endless repeat, you could use function-based values or random values in a loop. https://codepen.io/mikeK/pen/jOmPWOJ ... and please provide your case in a CodePen - its easier for us. Happy tweening ... Mikel
    2 points
  21. Hey @renny, Perhaps this example will give you some inspiration. https://codepen.io/mikeK/pen/xxdGxNV?editors=1010 Happy scrolling ... Mikel
    2 points
  22. I noticed several problems: You set your start to "top top" (good) but your end was "bottom bottom" and your trigger element is exactly the height of the viewport, thus when its top hits the top, its bottom hits the bottom. So the start and end are right on top of each other (not good). So of course it wouldn't toggle I think you meant end: "bottom top" or end: "+=100%" (functionally the same in this case). The loop is using a zero-based index but it looks like you set your attributes as 1-based, so it would put the is-active one section BELOW what's actually on the screen. There's no reason to set scrub: true on a ScrollTrigger that has no animation associated with it. It doesn't hurt anything, it's just pointless. Here's a fork with those changes in place: https://codepen.io/GreenSock/pen/YzVXKzd?editors=0010 But of course that doesn't do any fading like you wanted. Here's a totally different way you could set it up that I believe gives you the result you wanted (unless I misunderstood): https://codepen.io/GreenSock/pen/QWvbLjN?editors=0010 I hope that helps!
    2 points
  23. I just laughed out loud at the ridiculousness of my oversight. Scrub with a number is literally exactly what I was looking for. Thats embarrassing. I even ended up implementing a solution similar to the one I was looking at from that site. Inside the mounted function in my vue app I had this code: (didnt think I needed to add to a codepen since its convoluted and your suggestion accomplishes the same thing easier) const proxy = { value: 0 }; this.animationTimelines = [ new gsap.TimelineMax({ paused: true, ease: gsap.Power3.easeOut, onUpdate: () => { console.log('Real update'); } }) ]; const that = this; this.scrollTriggers = [ new gsap.TimelineMax({ scrollTrigger: { trigger: "#bio", scrub: true, start: "top top", end: "bottom top" }, onUpdate: () => { console.log('psuedo update'); let unrefinedProgress = that.scrollTriggers[0].progress() let currentProgress = unrefinedProgress.toFixed(6); gsap.TweenLite.to(that.animationTimelines[0], 0.8, { progress: currentProgress, ease: gsap.Power3.easeOut }); } }) .to(proxy, 1, { value: 1 }) ] //okay now add the actual animation this.animationTimelines[0] .fromTo('#bio-container .bio-animation-wrapper', { opacity: 1, rotationX: 0, scale: 1, y: 0, z: 0, transformOrigin: "50% 50% -100px" }, { opacity: 1, rotationX: 90, y: 100, z: -100, duration: 0.5 }) .fromTo('#bio-container .bio-animation-wrapper', { height: '160' }, { height: '0px' }, '-=.5')
    2 points
  24. I'd probably apply a gradient to a <rect> element or something and then just animate the x or y position. Maybe a bit of masking? Hard to tell without reference/ Why don't you start a new thread with a minimal demo?
    1 point
  25. Hi seven! Your codepen doesn't work because you are trying import local files. import { ShowcaseLogo } from './ShowcaseLogo'; If you want to use imports on CodePen, try using a CDN like skypack. import { gsap } from 'https://cdn.skypack.dev/gsap'; TimelineMax is deprecated. Just use gsap.timeline(). Also, check out the new scoped selector. https://codepen.io/GreenSock/pen/BaWOZpM
    1 point
  26. yes, visibility hidden is MUCH better to manage than adding and removing elements.
    1 point
  27. Come to think about it maybe instead of removing the element i should just set visibility:hidden
    1 point
  28. I want the Dragon gif to move from the right to the left of the screen along the wiggly SVG line. The SVG line should stretch to full width. I've tried adapting a GSAP tutorial but the gif is stuck to the left of the line, not the right, it needs to ALWAYS start off page really, on the right, and swoop across and away. Tweaking the original SVG line got it to jerk across, I'd prefer a motion which completes the screen traverse by the time the user scrolls a screen height. All thoughts appreciated on how to improve. Finally when you take a tutorial from codepen it has ALL the gsap .js files appended, how do you know which ones you need for a certain page?
    1 point
  29. Hey @GiovanniR, Welcome to the GreenSock Forum. It would be great if you showed your case in a CodePen. Then one could better imagine what you mean. Happy tweening in a CodePen ... Mikel
    1 point
  30. These forums aren't really for providing *perfect* solutions. Think of the demo as a step in the right direction! I'd recommend getting stuck in to it, reading the docs and trying to figure out how it all works. We're totally here for questions if there's anything you're battling to understand. Here - I've tweaked Jack's demo to expand out the ternary - you can see that it's just a function. You can write any custom logic in there you want! https://codepen.io/cassie-codes/pen/b7d607ff9ccecb148cfcdf2900a22a7a
    1 point
  31. Hi everyone. I am new with GSAP, My goal is trying to make this animation done today. I am learning stagger and other tools. Can anyone help with this animation ?. I tried to make all pieces from the crystal floating forever after .to. without animating single one of them
    1 point
  32. Yes, exactly. If a fee is collected from more than one entity, that's what triggers the need for the commercial license that comes with "Business Green" memberships. I think you'll find that the membership pays for itself in very little time. And of course we offer a satisfaction guarantee. We've never rejected a refund request (they're quite rare). We're passionate about having happy customers around here. Does that clear things up?
    1 point
  33. Good question, @handcake. And welcome to the forums! If there are no fees being charged to multiple customers for the site/app/game/product that uses GSAP (including no micro-transactions), then the standard "no charge" license covers that type of usage. No need to get a Club GreenSock membership unless you want some of the bonus plugins (which can save you a lot of time and money) or if you just want to support ongoing development. But the vast majority of our users never pay us a dime. Please don't feel any obligation. Enjoy the tools!
    1 point
  34. Hi jordanklaers! There is no old version of ScrollTrigger. More like ScrollMagic. 😉 And it's hard to tell what the code is even doing. Probably some type of proxy animation. Have you tried using a number value for scrub?
    1 point
  35. @OSUblake: it works, thank you!
    1 point
  36. Sorry about that, @StGewehr. It's a regression that's fixed in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js If you need a .tgz (like to npm install), that's here: https://assets.codepen.io/16327/gsap-beta.tgz Better?
    1 point
  37. Hey @Dushyant Kumar, Is this example helpful? https://codepen.io/mikeK/pen/gOwRZON Happy tweening ... Mikel
    1 point
  38. Hey i figured it out thanks to you ! i created one scroll trigger for all the tweens and it seems to be working!
    1 point
  39. oh, and go through the demos at: https://greensock.com/st-demos/ The demos may not have the same animation you need, but chances are there is a page structure and JS approach that you can alter to suit your needs.
    1 point
  40. You don't want to have multiple ScrollTriggers on tweens inside a timeline I'm having a difficult time following what you are asking based on the demo, perhaps someone else can chime in. My advice to start is to create one timeline that includes all the animation working as it should. Hook that timeline up to a single ScrollTrigger. Adjust the start and end positions as needed. If you need more control, break your timeline into separate timelines each with their own ScrollTriggers. Once all this works, then worry about React. FWIW you don't need any additional files or libraries to make GSAP work with React.
    1 point
  41. Thank you @Cassie. I think using span tag is a good idea. I have modifies my code and now it works as I needed. codesandbox
    1 point
  42. Hi Brian, Thanks for the demo. Unfortunately I don't have the time to go into the demo and re-work it to meet all your needs. If you want an animated counter effect I have this free blog post containing a video and demo https://www.snorkl.tv/greensock-animated-counter/ I have a lesson in my Creative Coding Club courses that explains how to make it into a re-usable effect so that it's very easy to implement multiple times with different settings. This is more advanced and would require quite a bit of time to explain here. If you're interested, every step of this is explained in a series of detailed videos at CreativeCodingClub.com. For now, below is the demo which you are welcome to explore and re-purpose to suit your needs. https://codepen.io/snorkltv/pen/NWRqmOv?editors=0010
    1 point
  43. Your bounds is set to the SVG, which is larger than your grid. You can specify the bounds as an object. return new Draggable(target, { bounds: { maxX: WIDTH, maxY: HEIGHT }, ... });
    1 point
  44. Your SVG markup is a little messy, there are a few typos, missing closing tags, and you've got some SVG markup inside that foreignObject tag too. SVG's pretty forgiving - like HTML, but I think that's probably the issue. I tidied it up and it seems to work fine, which is actually pretty surprising to me! I would have assumed there would be all sorts of coordinate space mishaps! https://codepen.io/GreenSock/pen/LYyEzJK (Also it would be great to understand what problem you're solving by using foreignobject? My first go to here really would be to see if there's a way to do this without.)
    1 point
  45. If you kill() something, it's dead. Don't kill() it if you need it later. Just pause() it instead. It might help if you provided a minimal demo so we can see the context and better understand your goal. A delayedCall() is just a tween instance with an onComplete/onReverseComplete. So you can also myCall.restart(true) to start it all over again.
    1 point
  46. Hi did someone ever solved this for GSAP3 in Vue.js ? Here is a demo solution that works: <template> <div> <object id="svgObject" type="image/svg+xml" :data="svg"></object> </div> </template> <script> import gsap from 'gsap' export default { data() { return { svg: require('@/assets/simple_opt.svg'), } }, mounted() { // if (this.blink) { // this.doBlink() // } window.addEventListener('load', function() { // here is the Vue code var svgObject = document.getElementById('svgObject'), svgDoc = svgObject.contentDocument, // select child elements like this : svgChild = svgDoc.getElementById('path') /* / ANIMATION */ // MOVEMENT gsap.to(svgChild, { duration: 3, opacity: 0, xPercent: -30, yPercent: 8, ease: 'power2.InOut', repeat: 0, }) /* END ANIMATION */ }) }, methods: {}, } </script> Cheers Anton
    1 point
  47. Hi @delizade Uhhhh.... I did forget about you. Sorry about that. But here's a nice demo for you if you're still interested. If you need any help understanding it, just let me know. I tried to make as simple as possible.
    1 point
  48. Hi TELLO Welcome to the GreenSock forums. I think rather than trying to change the duration on click, this would be a really good chance to change the timeScale(). Here's a quick pen showing this option in action: http://codepen.io/PointC/pen/VjaXYd/ Here's some reading about timeScale() http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/timeScale/ Hopefully that helps a little bit. Happy tweening.
    1 point
×