Jump to content
GreenSock

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

Leaderboard

  1. GreenSock

    GreenSock

    Administrators


    • Points

      403

    • Content Count

      15,938


  2. ZachSaucier

    ZachSaucier

    Administrators


    • Points

      400

    • Content Count

      7,146


  3. PointC

    PointC

    Moderators


    • Points

      226

    • Content Count

      4,124


  4. akapowl

    akapowl

    Moderators


    • Points

      210

    • Content Count

      637



Popular Content

Showing content with the highest reputation since 01/24/2021 in all areas

  1. Hey, A little experiment on how ScrollTrigger and snap could be used. Just for info. Happy tweening ... Mikel
    7 points
  2. Hey, I created a simple example based on this CodePen from the GreenSock collection (I assume that this is what you're after). Now for some reason in Codesandbox this didn't worked so I had to create a repo and publish the sample in the corresponding GitHub page. This is the repo url: https://github.com/rhernandog/gsap-flip-react Here is the meat of the code: https://github.com/rhernandog/gsap-flip-react/blob/master/src/App.js Here is the live sample: https://rhernandog.github.io/gsap-flip-react/ Based on your initial post in the thread
    7 points
  3. Hey @sorciereus, You could also use gsap.utils.shuffle() and stagger methods - and a motionPath and ... https://codepen.io/mikeK/pen/PobOwjN Happy landing ... Mikel
    6 points
  4. Hey @mr-parrott Would something like this work for you? window.addEventListener("load", () => { function createNew() { let tl = gsap.timeline(); tl.eventCallback("onComplete", createNew); new Anim(tl); console.log(tl) } createNew(); }); https://codepen.io/akapowl/pen/69280b40e98c9947a89e48fe6587563d
    6 points
  5. These staggers that happen near to each other time-wise are a job for ScrollTrigger.batch It essentially triggers them in close proximity to each other. You can read up on the method in the docs. It is quite extensive and thorough. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch() Additionally, you can also add back onLeave and onEnterBack as in the docs, if you want to re-trigger the first batch as well. https://codepen.io/dadacoded/pen/94b47a1c756f829787ed27e177cd0b36
    6 points
  6. Hi shozo, https://codepen.io/AngeloKeirsebilck/pen/YzpZqQM I would do it like this, not sure if this meets your requirements? As I made three separate grids now. But it surely works like this.
    6 points
  7. I'm not quite sure which three you mean, but here's a basic example of using a label and starting three tweens at the same time. https://codepen.io/PointC/pen/063602d13b661983d59411b5660d08a8 Does that help?
    6 points
  8. The question reminds me of my old 2,000 post demo. It's still in GSAP 2 syntax, but maybe it'll give you some ideas. https://codepen.io/PointC/pen/RyaJmj
    6 points
  9. There would be a few ways to make it happen. An easy choice would be to loop through your words array and animate two at a time like this. https://codepen.io/PointC/pen/jOVEade Hopefully that helps. Happy tweening.
    6 points
  10. Hey @sorciereus There are some issues in your code; e.g. you get an eror thrown in your console - always a good starting point to debug things. There's a comma missing after the duration in your tween. Also you are missing the hash for the id you want to address when creating the SplitText - and new SplitText1(...) is not a thing as far as I know. var mySplitText1 = new SplitText1("txt1", { ... // not good var mySplitText1 = new SplitText("#txt1", { ... // better I changed those, increased the duration and x-value of the tween and added a de
    5 points
  11. var colors = ["#f38630","#6fb936", "#ccc", "#6fb936"]; //initially colorize each box and position in a row function setup() { gsap.killTweensOf('.box'); gsap.set(".box", { backgroundColor: (i) => colors[i % colors.length], x: (i) => i * window.innerWidth / 4 }); gsap.to(".box", { duration: 40, ease: "none", x: `+=${2 * window.innerWidth}`, //move each box 500px to right modifiers: { x: gsap.utils.unitize(x => parseFloat(x) % (2 * window.innerWidth)) //force x value to be between 0 and 500 using modulus }, repeat: -1 }); } setup() window.addEventListener(
    5 points
  12. Yeah, it's totally fine if you want to start a discussion here in the forums, but we'll just be very clear about it being out of scope so you may not see "answers" from the admins/moderators. With GSAP-related questions/topics, we feel an obligation to do whatever we can to deliver an answer but we have limited time/resources so we can't spread ourselves too thin by encouraging or participating in extra-curricular discussions, that's all. We spend an inordinate amount of time answering people's questions here for free while also trying to tend to other duties so I hope you don't take it person
    5 points
  13. Just change your trigger and you are good to go. Also you will need some height/spacer at the end because you will not be able to reach the last trigger. trigger: item
    5 points
  14. secAbtTl .from( ".sec-about-presentation h1", { // yPercent: 100, opacity: 0, stagger: 0.1 }, "<0.5" ) "<0.5" This adds 0.5 delay at the start of the tween.
    5 points
  15. Hi, You can create a live editable sample of an app bundled with Parcel in codesandbox. Just create a VanillaJS sandbox, I believe that by default those projects actually use Parcel to bundle the app. All you have to do then is just install all the dependencies you need. https://codesandbox.io/ Happy Tweening!!!
    5 points
  16. Hey @Lichay, Do you expect such a 'timing'? https://codepen.io/mikeK/pen/mdOWomE?editors=0010 Here another example: different durations and positions https://codepen.io/mikeK/pen/qBqrgLL Happy tweening ... Mikel
    5 points
  17. Hey, @mikel showed you a really nice way to do this. Key things to note: you will need two identical paths in your svg. The newly drawn ones need to be set to hidden and drawSVG: 0 before the start of the animation. Alternatively you can use tween.from() which sets the animation in such a way that the values you enter become the initial values and the animation proceeds to the values in your css/html. https://codepen.io/dadacoded/pen/b1f0f163afe3340ac0ba930f5894d21a?editors=1010
    5 points
  18. Sure, something like this?: https://codepen.io/GreenSock/pen/43ff6412b2e9f950c66d356e38e572d3?editors=0010
    5 points
  19. It looks like GSAP is doing exactly what it's supposed to. Notice that your element has a transform applied to it already: transform="translate(0 75.828)" So that means its "y" is starting at 75.828, so when you animate it to -1, it's moving it a total of 76.828 units up. Did you want to only move it 1 pixel up from wherever it currently is? If so, just use a relative value by adding a "-=" or "+=" prefix: gsap.to('#barraBot',{y:"-=1" , duration: 3}) So in this case, that'll take the current value (75.828) and subtract 1 from it, and use that as the end value of th
    5 points
  20. Hey tailbreezy. First off, you're making one of the most common GSAP mistakes: not setting all of your transforms with GSAP on elements that you're affecting with GSAP. Is this what you're wanting to do? https://codepen.io/GreenSock/pen/abBBeRq Side notes: Usually it's more common to use the same <svg> and then use <g>s to move things around as needed. Note how I included the clearProps between the .getState() and the .from(). Width should be automatically recorded by Flip, I'm surprised that removing the { props: "width"
    5 points
  21. Sure. @Carl made a nice demo showcasing this exact method. https://codepen.io/dadacoded/pen/a045c5d4c5592c20935539ae99be2b3e?editors=1010
    5 points
  22. Hey @heneu You could decrease the duration, adjust the amount to shift things to the right for the width of a single item, add a repeatDelay (which represents the time you want to wait) and add repeatRefresh: true to make sure, that when it repeats it will start from the last position instead of the start, and you should be good to go. Welcome to the forums https://codepen.io/akapowl/pen/7c06e8f26466232f9183e891114f0077
    5 points
  23. Welcome to the forums, @saritas. It looks like you're using the old syntax. I'd strongly recommend upgrading to the more concise, powerful and simple API in GSAP 3. You can just use repeatDelay to put a delay before the yoyo: let tl = gsap.timeline(); tl.to(obj1, {x: 100, duration: 1, repeat: 1, yoyo: true, repeatDelay: 2}) .to(obj2, {x: 100, duration: 1, repeat: 1, yoyo: true}, 1); Or you can just use 4 tweens instead of yoyoing 2 tweens. In other words, accomplish the yoyo effect with different tweens. Happy tweening
    5 points
  24. I don't see much wrong with this method, except for one thing: In the CSS there is a transition: all set on the .nav li a. This causes some stuttering on the links when you tween on them with GSAP because GSAP has to fight with the CSS transition, so this is something you would want to avoid. Except for that it works quite good, I would say. For the scroll-blocking: This is more of a general thing, but you can certainly do that with GSAP - and even pretty easily. What you want is to set overflow: hidden to your scroller element (the body here). You
    5 points
  25. I would say this is not just a sidenote, as @mvaneijgen said, but rather neccessary logic for it to properly work. In that first pen, he is creating an array of all boxes on the page, so every time a ScrollTrigger would be triggered, it would animate all boxes on the page, which would create logic-issues/conflicting tweens with the next time all boxes would be animated when hitting the next trigger. In the second pen he chose to only address the boxes inside the specific wrap, so only those will be animated on trigger. Since the triggers are set on each wrap there
    5 points
  26. I looked at it on my iPhone 12 Pro as well and didn't notice any unexpected problems. Please note that iOS Safari shows/hides browser chrome when you swipe up/down which literally changes the height of the page. ScrollTrigger can't magically solve that for you. In order to avoid a sudden stop in scrolling or jump, it defers the refresh until scrolling ends. You can, of course, force a refresh() if you prefer, but you'll have to accept the tradeoffs (loss of momentum scroll and potentially a jump). Also, I would really appreciate it if you would stop making accusations
    5 points
  27. Hey @habhab. If you want to loop something infinitely, you would want to use repeat: -1. To get rid of that jump, you'd want to make sure it doesn't repeat from the start, so you'd probably want to increase the rotation with each repeat by using "+=" instead of tweening to a certain rotation and use repeatRefresh: true to make sure it starts from where it ended. Then again, with how you pass the rotation, I figured it would change the amount of increase in rotation for an individual atom every other repeat https://codepen.io/akapowl/pen/1eef1c11a
    5 points
  28. Or how about gsap.from( ".main-content > *", { y: 100, ease: "Power2.easeInOut", opacity: 0, duration: 0.4, stagger: 0.3, } );
    5 points
  29. Welcome to the GreenSock forums @Muzammil hasan , you could do something like the following for instance. var target = document.querySelectorAll(".main-content")[0]; gsap.from(target.children, { y: 100, ease: "Power2.easeInOut", opacity: 0, duration: 0.4, stagger: 0.3, } ); Hopefully that helps your efforts.
    5 points
  30. Is your goal to have everything rotate around the center of the SVG? If so, svgOrigin is probably the easiest way to do it. https://codepen.io/GreenSock/pen/b9a523861af8c67036640810240c64fb?editors=0010 transformOrigin is always in relation to the element itself (not the SVG canvas), so "50% 50%" would be the middle of the element itself. And px-based values would be measured from the top left corner of the element itself. Does that help at all?
    5 points
  31. So, what is hindering you? Just do it, like on any other ScrollTrigger - only the end should be dependent on a certain width instead of height here. https://codepen.io/akapowl/pen/b8f05dee69dabe80357077e911121f16 I updated this pen to use x-translation here instead. There is no problem for me like it is in your demo. Remember when I said this following before? "The way you are positioning your box1 (with transforms applied) will likely throw things off when wanting to tween on transform-values with GSAP, so you should consider maybe p
    5 points
  32. There are many ways... Just use a regular delay (it's a special property): gsap.to(window, {duration: 0, scrollTo: from}) gsap.to(window, {delay: time, duration: speed, scrollTo: to}) Or use a timeline: let tl = gsap.timeline(); tl.to(window, {duration: 0, scrollTo: from}); .to(window, {duration: speed, scrollTo: to}, time); There are other ways too. Does that help?
    5 points
  33. In addition to what the others said: That page you linked to does use some sort of scrolljacking - something like fullpage.js does. This is not what ScrollTrigger is built to do in the first place. You can certainly achieve something like that with ScrollTrigger but you'd have to do most of the work (like handling eventlisteners and hijacking the all different possible scroll-events) yourself or choose to use a library like fullpage.js that does it for you.
    5 points
  34. It is working. You're scrubbing through it. If you scroll slow enough you can see that happening. If you scroll quickly then it will jump because that's what you're telling it to do. Maybe you'd like a numerical scrub like scrub: 0.5? Or perhaps you'd like to fire set enter and exist animations (i.e. don't use scrub, just use toggleActions. Or just use the callbacks and fire new tweens each time).
    5 points
  35. Hey @huytran - welcome to the forums. What you are experiencing is related to your path not being a single path stroke but forming an enclosed shape. You can see what I mean in the pen below if you change your fill to none, make the stroke a bit thicker and add a stroke-color. (I left it in the background for you to see what I mean) If you want it like in your pictures, you should make sure that your path is set up correctly. Something like this: https://codepen.io/akapowl/pen/820becb396cb470a2c317239fe474d2f E
    5 points
  36. Yep, exactly - we've actually got 3 levels of GSAP-ing; we've got the raw timeline which is the base which has "extra" animations because we want things to be "infinite", so we can't start the animation at the very beginning - there won't be any elements showing to the LEFT of that first element. So, for example, if we've got 5 elements to animate, it'd look like: 1-2-3-4-5-1-2-3-4-5-1 ^ start here The "overlap" is just the number of elements on each side of the start/end that we'll pad it with (so we'll add 2 * overlap number of extra animations). It really just depends how m
    5 points
  37. Hey Schweinedog. Thanks for supporting GreenSock with a Club GreenSock membership! A few notes: You don't need the new keyword when creating timelines. You might benefit from GSAP 3's defaults functionality. You might benefit from GSAP 3's random functionality (don't have to write your own). As for your question, since in this case you want a different random value for each repeat but not each target, I'd probably make use of the onRepeat callback along with some variables like so: https://codepen.io/GreenSock/pen/ExNYazp?editors=0010
    5 points
  38. Hi @Lichay, I'm not entirely sure what you're looking for but I'm thinking you just need a repeat, yoyo, and a repeatDelay: gsap.to(element, { y: 200, scale: 1.3, repeat: 1, yoyo: true, repeatDelay: 2, });
    5 points
  39. It isn't staying there for 1-2 seconds in your demo - it's an illusion caused by the fact that you're using a "power4.out" ease which makes it slow WAY down at the end. If you change that ease to "none", for example, you'll see the change in direction is immediate. To make it jump back to the very start of the animation once it completes, you can use an onComplete to basically "rewind" it like this: https://codepen.io/GreenSock/pen/43a85e285303a5e8f47ae9b9090f7ca2?editors=0010 There are actually a bunch of ways you could do it, but I don't want to overcomplicate
    5 points
  40. Is it working better now (after clearing your cache)? There was a very particular edge case that I needed to work around in DrawSVGPlugin, requiring one line of conditional logic that I put into the next release, and you can preview it now on CodePen with the usual URL: https://assets.codepen.io/16327/DrawSVGPlugin3.min.js
    5 points
  41. Hey @Shikha and welcome to the GreenSock forums. No, we do not offer our products for free. How could we make a living if we did that? We'd have to stop offering our services to people which would be worse for everyone who uses them as well as ourselves. As Shrug suggested, we highly recommend that you read about why we have the pricing model that we do. As for alternatives, you simply cannot find a free equivalent to GSAP and all of the plugins that GSAP offers. GSAP is the standard for web animation. When you use GSAP, especially with the Club GreenSock plugins, you c
    4 points
  42. There is endArray option when passing arrays. gsap.to(arr,{ duration: 2, endArray:[250, 250, 250, 250, 250, 250, 250, 250, 800, 800] }) https://codepen.io/dadacoded/pen/ac9bb546aae9d2c50d3182fa316abb4b?editors=1010
    4 points
  43. Hey @angelokeirsebilck I think this is sort of a tricky scenario and since I was interested myself, I gave it a shot. In a case like this it's usually best to wrap all of your content and pin this wrapping element instead, when you don't want the pinSpacing to take its effect of adding spacing for being able move the pinned items - since when you simply set pinSpacing to false, as you noticed, the content beneath that pinned element would scroll over it. This is where the trickiness kicks in, because on one hand you don't want pinSpacing to add space, but on
    4 points
  44. Looks like you have a .set() that would also need that label so the tiles will be visible. I've forked your demo and commented out everything except the .showerCabin and .tiles tweens. https://codepen.io/PointC/pen/037a036a597ca5f411c25a43c100cb8f Is that what you needed? PS Just FYI - You also have a conflict for the tiles[2] target on lines 24 & 25. you've asked those tweens to start at the same time but the tiles[2] target is moving to different x/y positions in each.
    4 points
  45. Hey @PG1, Just for FUN ... https://codepen.io/mikeK/pen/xxREJqR?editors=1010 Be creative ... Mikel
    4 points
  46. Hey @kalimschka Understanding, how the durations and position parameter work on ScrollTriggers with a scrub applied, you could achieve adding such a pause by either adding an empty tween to your timeline where you need it with the neccessary duration... https://codepen.io/akapowl/pen/3b469c518638934c3133c377a109c734 ...or you could right away just position things as needed with help of the position parameter. https://codepen.io/akapowl/pen/d6c235bf9e4def4be39b146e4ae4dfed
    4 points
  47. Hey @hintondesign You are still nesting ScrollTriggers inside multiple timeline tweens. It may work as you expect for now, but further down the road you might run into problems. Also; you don't need the immediateRender on every single tween, only on those, that contain elements on which you have tweened on the same values before. Here's how I would tackle it; creating an independent timeline for every section you have (and apply the scrollTrigger with a start of 'top top' and an end of '+=100%' to each of those timelines), using "<" in the po
    4 points
  48. Keep in mind that we didn't create this demo, @creativeocean did It's what Tom (Creative Ocean) used to determine the total length of the ScrollTrigger. You could use an alternative method of setting that distance. No, quickSetter works with any unit so long as you set it that way. Pixels are the most common unit for this sort of thing though. That's the position parameter. It'd depend on what sort of animations you're trying to add and where. It's too general of a question for us to really answer.
    4 points
  49. What @akapowl suggested is good also if you want to target every instance that uses “.main-content”. Then you can instead just use the child combinator > and wildcard * like he has shown for an even cleaner approach. 😉
    4 points
  50. Hm, your blue line is growing/stretching/moving, so what exactly would you want the yellow circles to do? In other words "move with the blue line" is rather ambiguous. You could certainly plot their relative position between the blue line's start/end points, and then in an onUpdate set their cx/cy values accordingly so that they move in a relative fashion.
    4 points
×