Jump to content

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

tailbreezy last won the day on February 25

tailbreezy had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by tailbreezy

  1. Yes. That is perfect, I will use the workaround until the official release. Thank you, Jack.
  2. Hope so. I am wondering why css vars are excluded from being passed to modifiers. What would be a work around if that is the case?
  3. It is a pity that my questions always occur on weekends. The question is basically how to access the css variable in modifiers so that we can put it in a wrap or something. Will be used in infinite loop scenarios.
  4. Hello fellas, afaik "bottom-20" is invalid syntax. And since it is invalid, it will move you scroller-end anchor to the very top You should do "bottom-=20" (notice the = sign) which will subtract 20 from the bottom value (e.g 1000 - 20 => 980) so you get 20 pixels from the bottom (upwards). Likewise there is also "bottom+=20") which will get you 1020 (e.g 20px from the bottom of the screen downwards). Also keep in mind that trying to understand using bottom and top is a little hard because the anchors will move out of the viewport. Use "top center-=100"..."top center+=100" to see the effect in action. Cheers
  5. Hello guys, What is the syntax here? This seemed to have worked in the past (I found a link that suggested it can be used in this form); No output in console.log. Cheers
  6. tailbreezy


    Everything is allowed in NFTs, but not the way you think. You just have a link to some data, which can actually be changed later on (not really secure, thus people use IPFS to make it a little more secure). The NFT is only a certificate, it doesn't distribute any assets (images, videos, etc.) — if you consider this — it cannot be any other way, because it needs to be on the blockchain and it will bloat pretty fast if it includes anything other than a little bit of byte code. Using Rarible to mint NFTs is pretty easy — a matter of filling some fields and providing a link to asset, but you are left with the limitations on their own smart contracts. Also note that it is actually somewhat expensive it varies quite a lot but expect to pay $35-150 for a single nft.
  7. Thank you for suggesting paper, mattsrinc. I have actually already came across paper and was considering it, if I were to build something from scratch. I was afraid that I would have to write quite a lot of logic to handle the scenarios Jack listed (which I need, because they are the main point). Thank you again, Shrug. Both examples are pretty great. Oh, wow, Jack! Thank you for the closed paths fix. The four bullets listed were indeed what I was looking for when I started searching for the best tool to handle my very small but specific situation. I will probably be using svgs with just a handful of control points, so animating actual svgs would be fine and even preferable. So simple. Love it
  8. Thank you, Shrug. This is a very nice example.
  9. Hello guys, I am looking for a way to add interactivity with bezier control points and handles to svg paths. Similar to MotionPathHelper functionality, though the .create method breaks on closed shapes and the .editPath method opens up the paths. The Ease Visualizer/Custom is also a good example. Additionally, what would be the best way to store each onDrop state ( in say MotionPathHelper). Cheers
  10. Hello, I am not sure either. But if you increase your Tween rotation to 720 and remove the delay from Tween2 you will be in sync so to speak. var Tween = gsap.to(player, { rotation:720, ... } var Tween2 = gsap.to("#target1", { ... repeatDelay:0 })
  11. Hello Daniel, Your inverted state doesn't have enough information to fill the screen, if you make a couple of css changes you will get what you want if I understand correctly the task img { max-width: 100vw; } Not sure if you want to keep the overflow or not, but you can also comment it out to get full-screen to container effect. .hero { position: relative; ... // overflow: hidden; } https://codepen.io/dadacoded/pen/edf9bf80daaa2d137ccdc0cb4233ab75?editors=0110
  12. Here is another way. The approach with two scrollTriggers is quite nice.
  13. Indeed. The moment you scroll even a hint inside the new scroller, the animation runs. Try adding those to debug. x: 500, duration: 5
  14. Hello, I think the goal (on reverse) is to play 1,2,3,4,5,6 in that order opposed to 6,5,4,3,2,1, so scrub will not be appropriate. Probably two timelines will be best with onStart and onEnterBack.
  15. I think the animation runs immediately because it uses the wrong trigger and start/end. Try adding those. <div class="box"> <div class="anim_me" style="padding-bottom: 10rem">For the love of pie, Please animate me using scroll Trigger!</div> </div> gsap.to(".anim_me", { scrollTrigger: { scroller: ".box", trigger:'.anim_me', start:'top bottom', end:'bottom bottom', toggleActions:'play reverse none none' }, x: 200, color: "red", duration: 2 });
  16. I think this should solve your issue, apart from the fact that is still incorrect. You probably have some other issue as well, it is hard to tell without a live minimal demo. Try to recreate your problem in Codepen and see if it still persists.
  17. You can rewind your progress to 0, gsap.killTweensOf( target ) and recreate your animation. window.onresize = () => { timeline.progress(0) // go back to before the timeline progress has moved gsap.killTweensOf( '.target' ) // kill ongoing tweens // re-init your animation // if you initially have a function that sets up your timeline, you can just called it here }
  18. Hello there, This issue probably has to do with your anchors placement or having too short of end value in scrollTrigger. https://codepen.io/dadacoded/pen/72901772ab1a6bc88593420b9d704353?editors=1010
  19. Hello there, I am not sure what could be the problem, it is hard without seeing a minimal demo or live version. There is one typo though: ease: "power1. inOut", It should be without the extra space.
  20. You can also check this similar concept. https://www.sarasoueidan.com/tools/circulus/
  21. tailbreezy


    Hello, Working with complex scenes will only hinder your progress. Try reading the docs and make demos as simple as possible. Here is a scrub animation of a h1. https://codepen.io/dadacoded/pen/d4175e5d760c18257e66452aa4f3dfff?editors=1010
  22. Hello, https://css-tricks.com/almanac/properties/i/inset/ My guess is your are pinning something. Don't worry about it, it just have some default values that will have no visible effect for you.
  23. tailbreezy


    Hello, It is working, though you animation is already completed when you get to see it. Also check your console from time to time, you have several errors that currently aren't affecting much, but could bite you later. You might have to read up on setting up ScrollTrigger. https://greensock.com/docs/v3/Plugins/ScrollTrigger
  24. Hello, It uses the css @media syntax: "(min-width: 800px) and (min-height: 800px)": function() {}
  25. I did try all of those options, but none seemed to work. Possibly Mozilla broke it again on later releases. https://codepen.io/dadacoded/pen/fef612ff41dd7328230dc1f746a37e62