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 05/02/2021 in all areas

  1. I think this should do what you want https://codepen.io/snorkltv/pen/ExZqKGr
    3 points
  2. Hi, If you're looking to tween the line from right to left, using this in your path's d attribute does the trick: <path id="first" style="stroke-width:1;fill:none;stroke:#000;" d="M77,8 L0,8"></path> If you're looking for a different shape, honestly I don't know, SVG is not my strongest suit. It seems that you already took a look at this thread: And to this article by @PointC: https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ Perhaps @PointC, @Cassie or @OSUblake (didn't forget this time ) our SVG wizards could enlighten us in a different way to do this. Happy Tweening!!!
    3 points
  3. Hey @buster808, The option here is that the object moving along a path is always positioned in the center of the screen. https://codepen.io/mikeK/pen/qBqEeMj?editors=0010 Happy scrolling ... Mikel
    3 points
  4. Hi, Basically they're using this background: And they're using PIXI's tiling sprite class: https://pixijs.io/examples/#/sprite/tiling-sprite.js As for the deformation, it seems that they're using the displacement map filter: https://pixijs.io/examples/#/filters-basic/displacement-map-flag.js With this image: Perhaps @OSUblake our resident PIXI wizard can see something else in it and offer some advice. Chances are that perhaps He has a codepen in his vast collection that is similar to this. But if you're not quite familiar with PIXI and how it works, Mikel's morph SVG solution should be a very good starting point. Happy Tweening!!!
    2 points
  5. Hey @waldrus, Welcome to the GreenSock Forum. Here comes a simple construct using GSAP morphSVG. https://codepen.io/mikeK/pen/XWpvJap Happy morphing ... Mikel
    2 points
  6. Welcome to the forums @deys You might just have to set the scroller in your ScrollTriggers to whatever element it is you are scrolling in (if it is not the body). Let us know if that helps. If it doesn't, a minimal demo showing your problem would be very appreciated and most likley also neccessary to get to the gist of why it's not working on your end. Hope this helps, though. https://codepen.io/akapowl/pen/492510a24046490f5f9d7d815a115ed8
    2 points
  7. Oh OK. Yes I completely understand it'd thus be a pain to change. I'll have a play around with it and see what other possible options I have. The client does want to keep the original design so i'll probably go down the body overflow route because (I think) when I used a container div I was still getting the same issue. If I come up with another solution I'll post it on here for the record in case anyone else searches the forum. Thanks for you help and for coming back to me.
    1 point
  8. The duration property in GSAP is in seconds, the equivalent in Svelte is in milliseconds, hence the need to convert the values. I like GSAP, I like Svelte, I like talking to people who like GSAP and I like talking to people who like Svelte. I think I would like to talk about GSAP and Svelte at the same time. Word of warning, though, I have been knee deep on a PHP project with no animations so far, you will have to help me jog my memories on stuff. So, go ahead, make some RELPs and let's geek out.
    1 point
  9. @Carl OMG! Now I understand how silly my question is) I've just started to learn drawSVG and now I see how "100% 100%" works) Thanks a lot, Carl! And thanks for your tutorials!
    1 point
  10. Hi, You mean a different start and end points depending on the scroll direction? If that's what you're looking for, I don't know if that's possible with the current API. It seems that the config() method is intended for other purposes, as start and end values are read only. The only thing I can think of is to re-create the ScrollTrigger instance with the new values using the onLeave and onLeaveBack callbacks. Perhaps @GreenSock or @OSUblake could shed some light on that subject. Happy Tweening!!!
    1 point
  11. Hey @Filip3000, As a SVG fan, I'll send this version into the race. And: You can also pin another object - including the body. https://codepen.io/mikeK/pen/KKaOPey Here another example 'to pin or not to pin' https://codepen.io/mikeK/pen/c27a129d4e591657ee2eb7bc85a1774b?editors=1010 Happy pinning ... Mikel
    1 point
  12. As far as I can tell, it's a logical impossibility. If your layout depends on the screen height and the browser changes that screen hight by adding/removing the browser chrome when swiping in a certain direction, that by definition changes the size and therefore your layout is affected. I don't know of a magical fix to make it resize to fit the screen but not cause anything to reflow. See what I mean? Maybe someone else has an idea other than just not having your layout depend on the viewport size (or maybe lock it in after the initial load).
    1 point
  13. Hi Jack, Yes, I appreciate the codepen might have been useful but as I was confident it was an issue with the relative placement in the timeline I had thought the problem would be obvious from the code snippet - sorry about that and that the question wasn't clear enough. What you said was absolutely right though, as soon as I change the "+=5" to "<5" it all works perfectly and as expected! I thought the += was for from the previous item in the timeline, not the timeline itself - so something new learned! Thanks again! Bogo
    1 point
  14. That's great to hear! I can't tell you how many people have said that they learned JavaScript by learning GSAP which worked very well for them because it made things much more "fun". Getting things to move in the browser is more inspiring that reading dry documentation about theoretical jargon and how Arrays work, blah, blah. But as you move along with GSAP, it sorta forces you to reach for those other things (like "what's an Array? Why are there quotes around some of these things? What's camelCase?"). Anyway, good luck on your learning journey. I'm glad to hear GSAP is providing some inspiration along the way. 🙌
    1 point
  15. It'd be really, really helpful if in the future you provided a minimal demo - it's just kinda tough to follow what exactly you want and then try to mock it up ourselves (at least in our minds) in order to then troubleshoot I'm not sure I understand your goal, but I'm pretty sure the "+=5" position parameter is incorrect. Remember, that'll place it 5 seconds after the END of the timeline. It sounds like you wanted to place it 5 seconds after the START of the previously-inserted animation. Is that true? Perhaps you meant "<5"? It may also be good to use a totally different approach by thinking about the alternating in a different way - just create a timeline for one set, then a timeline for the other set, and then drop them into a master timeline in a way that offsets them slightly. master.add(buildSet1()).add(buildSet2(), 5); // offset by 5 seconds That way, you can modularize your code much more cleanly for the different sets (in a function for each). If you still need some help, a simplified CodePen will go a long way toward getting you a solid answer. We'd love to help. 👍 Side note: end: '+=3000rem' isn't valid. You can only use px or % (not rem).
    1 point
  16. Awesome! Thanks! I kind of picked up on that a bit from the contextual clues, but I wasn't completely sure of it. Thank you for taking the time to answer such a basic question. I'm learning JS an GSAP simultaneously, so I get a little befuddled when trying to wrap my head around what's being taught in the documentation. Nevertheless, I'm having a blast with GSAP. This is the perfect tool for molding the potential of online content. I'm finding it very inspirational.
    1 point
  17. Sorry about any confusion there, @SpaceMoney-01011000. Yeah, I guess it's somewhat GSAP-specific in a sense. Think of it like a configuration object where all the properties go. Originally (and remember, that means back in 2008-ish), I just named the parameter "vars" because that's where all the variable stuff went. It's an object literal, like: gsap.to(".target", // THIS IS THE VARS OBJECT: {x: 100, rotation: 180, ease: "elastic", onComplete: myFunc} ); Does that clear things up?
    1 point
  18. Hi @pietM. Yes, there was a regression in 3.6.1 that caused this, and it should be resolved in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js Better? Your demo seemed odd to me, though - you've got an extra .to() tween that's animating the characters opacity to 1 even though they're already at 1 at that time. I'm curious why you were doing that. If I understand correctly, deleting that part of tl2 resolves the issue as well.
    1 point
  19. Welcome to the forums @AlexMKC I think the reason it fires on page load is because you did simply not set a specific start to it, so it uses the default for not-pinning ScrollTriggers, which is 'top bottom' (when the top of the element hits the bottom of the viewport - for pinning ScrollTriggers it is 'top top' btw). Since your element is past that point on page load already, the animation triggers. If you want it to trigger at a different point, just define a start value for it - I set it to 'top center' so it triggers when the element's top hits the center of the page. Hope that's helpful. https://codesandbox.io/s/lively-silence-mfge8?file=/src/App.js
    1 point
  20. Hello @portareset1 Are you referring to the fullpage-like page-scroll? As this thread shows, there are certain ways of achieving an effect like this with ScrollTrigger. It should be stated though that this plugin is not really built for Scrolljacking like that in the first place. by @ZachSaucier A different approach could be to use a fullpage-like slider utilizing GSAP like for example those by @PointC mentioned in this thread by @Rodrigo just recently. I think they actually use some form of a slider on that website because the individual sections are transforming and it doesn't look to me like there was real scroll going on (I might be wrong though). Hope these suggestions can help you get started. Cheers.
    1 point
  21. I'm not entirely sure what you mean there, but here's a fork with my guess: https://codepen.io/GreenSock/pen/WNRqPNx?editors=0010 Notice that you had a collapsing margin issue that I resolved by adding a transparent border on the top and bottom. You could also do it in some other ways, like using padding instead. And by default, when the parent has display: flex, it turns pinSpacing: false because that's normally what people want but you can explicitly set it to true if you want the extra padding added.
    1 point
×