Jump to content

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


  • Content Count

  • Joined

  • Last visited

Everything posted by b1m1nd

  1. sorry I been up all night, I did not notice you were trying to do. ( though its right in the title .. just got hung up on that jquery.css part hehe) $(".nav-item") .on("mouseenter", function(event){ gsap.set(event.currentTarget, {color: 'white'}) }) .on("mouseleave", function(event){ let ct = event.currentTarget // might be best to set a var but you can access it same way. gsap.set(ct, {color: 'yellow'}) }) You can ofc expand on this and make a time line like you did above.
  2. Welcome ! I Like where you going with this very cool design. Short answer is yes, drop it in just like any other props ! Ie: gsap.timeline().to(".title__kerbside", { x: -10, scale: 1.1, duration: 0.4, color: "rgb(101, 255, 255)", // define like any other prop with value in " " ease: "power2" }) gsap.to(".title__karaoke", { x: 10, scale: 1.1, duration: 0.4, color: "rgb(101, 255, 255)", // just define it like this ease: "power2".................. // You can also set too gsap.set("#myElement", {backg
  3. While your a handsome dood, I really love your brand! Just saying having a <to/mo> in there would not hurt . Not why I am posting though, wanted to saying thanks ( again!!) for doing such a great offer and give away. I am proud to say I took advantage of the offer since I did not win the give away. I am really looking forward to continuing my GreenSock education and use!! Only 14 hours left to get in on this amazing value, I highly recommend it !! https://ihatetomatoes.net/get-practical-greensock/ PS. Really looking forward to learning fr
  4. I love GSAP because its easy to use and has a great community. ๐Ÿ‘ ๐Ÿ’š ๐Ÿงฆ
  5. @Learning Maybe this can help get you started. I know its not quite what your after... but its defiantly possible. ๐Ÿง™โ€โ™‚๏ธ I might tinker more later by adding some more overlays or try some masking, it looks like they are doing it in canvas which is also possible with gsap but out of my knowledge box. --edit I think using CSS vars is a decent way to go about it, because you can animate the pseudo props too. Canvas or SVG might be more fluid for the wave/motion. https://codepen.io/b1m1nd/full/VweEeog
  6. @toye Hi and Welcome to the forums! Being new to gsap you are in the right spot for help. Pretty sure bezier is now MotionPath in GSAP3 so you will want to upgrade and use it. Also help us help you! Best thing you can do is make a codepen of the issue and post it with your question. This way people are not stabbing in the dark. Enjoy! Cheers!
  7. @fogseller I think you mean ScrollTrigger plugin as "scrollmagic" is not a GreenSock plugin its another js lib entirely. What you want to achieve is totally doable though with GSAP.ScrollTrigger! here is an example you could use to get started! If you have a specific question about gsap or scrolltrigger make a minimal codepen of the issue then explain it well, and you are bound to get lots of help! Enjoy! https://codepen.io/GreenSock/pen/KKpLdWW
  8. Congrats on your new journey, can't wait to take part in it! Your "first year of gsap" post moved me so much... and your work inspires me on a regular basis. I don't even know how to express my gratitude for you sharing all this with us. What a fitting way for you now to spread your passion on to the future.๐Ÿ‘
  9. Hi @Marina its an issue because stagger needs an array. When your looping through each element and adding the timeline to them individually its still animating but has no siblings to stagger with. gsap.registerPlugin(MotionPathPlugin); let cabezas = document.querySelectorAll('.cabeza'); const r = 6; let tl = gsap.timeline(); tl.to(cabezas, { motionPath: { path: `M ${-r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${r * 2},0z`, }, duration: 5, repeat: -1, ease: 'none', stagger: 0.5, }); Strip it out of the loop and it behaves ... well it staggers
  10. @GreenSock No ofc not, I welcome it! So I kinda understood that already about Timelines. Not sure what I was doing there, at one point I had it as a .from and a .to with different durs and lastColor... hence the timeline vs a tween. ๐Ÿ˜ต๐Ÿฅด lol. --edit: I am still really grasping when to use the different tween types better. Now I realize I don't need the .from at all because gsap always tweens the current style of the element (which was changed by gsap already from the last tween in the "loop"). (whats odd is that what is making the function run? just noticed I had deleted the
  11. ๐Ÿ˜‚ It is so beautiful. ๐Ÿ‘you make B so happy! I had forgot about gsap.ultils , going to have to revisit as I remember lots of goodies in there ...
  12. @wuergeengel welcome ! I too love Greensock ๐Ÿ’š๐Ÿงฆ If you ever have issues I would try to put together a codepen and ask your question with it attached at the bottom. This helps the others help you better. So I was curiously about this my self just had not had a chance to tinker with it. After almost nuking my browser twice in crazy loops I think I maybe narrowed it down a little bit but have to stop here for now. I am hoping one the pro's jumps in with a better solution, cause I don't think this is the way. https://codepen.io/b1m1nd/pen/BajrzJo?editors=0010
  13. @GreenSock Is it still an ok practice to do simple CSS transitions with no transforms? And still be animating the element with Gsap ? like even if its a pseudo like so? cause JS and pseudo don't get along well. https://codepen.io/b1m1nd/pen/NWxyLJO?editors=0110
  14. @hugokhua Hey I like where you going with this for some reason ... lol Try adding ScrollTrigger.refresh() , worked for my test. $('.s2').on('click', function() { $('.s1').css('display', 'none'), ScrollTrigger.refresh() // <--- this will update all scrolltriggers on the page })
  15. <div class="moveMe"> <h1> Hi world </h1> </div> // then gsap.from('.moveMe',{ opacity:0,y:200,duration:5 }); @Lichay Your issue is in specificity. GSAP does not break your css, it is applying a inline transform to your element (cause that's what it does). So you need to split up your transform, maybe have gsap animate a parent element. Then have your hover on the h1.
  16. So I had a chance to revisit this and seems like the issue has noting to do with a child pin inside a parent pin. Its jumps and hops when giving a srollable prop to a pin period. If you comment out the first pin in my demo you can see this. Also looks like the locomotive pens have the same undesired effect in mobile. Has the same effect on android and looks like ios mobile devices. I don't know enough about how it works under the hood. I do love to test though.... Seems like it has to do with the body scroll speed and then the element scroll speed. Cause if I scroll about th
  17. https://greensock.com/docs/v3/GSAP/Timeline I really recommend looking at the docs for better examples and to understand how much control you have in timelines. this is how I typically start my timelines if I want to base the animation on the start of the tl ( but you can name it anything) tl .add('start') .to(something, {}, 'start') .to(something2, {}, 'start')
  18. @Animadraw Check out the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger , you should be able to translate them. Sounds like are after onLeaveBack: ({progress, direction, isActive}) => console.log(progress, direction, isActive)
  19. Well so at that point just add your own "buffer". I probably should have made a new pen but I duplicated to show you how both are the same pretty much. just added a parent div with extra height. moved the end: 'value value' of the trigger end based on that height and where I want the pin/animation to stop. tweaked the animation to maybe better replicate what your after in a timeline. [edit- removed rant] If the updated pen is still not what your after, I would probably try just doing the disable scroll from one the onEnter/Leave pops. https://code
  20. Really really helps to post your own codepen with the minimal example, without it people are just stabbing in the dark. Cause what it sounds like to a noob like me is you just want a basic scrub animation... While you could be trying to do something different. Simple as it gets example. Like so? https://codepen.io/b1m1nd/pen/yLeoQOG?editors=0010
  21. Thank you both ๐Ÿ˜Š๐Ÿ˜Š I had a lot of fun making it! Scroll Trigger is amazing, seriously you guys ...so easy, so many options! 100% This was totally one those out the box cases, I honestly was so shocked when it worked so effortlessly... Cause I thought the same thing, way to many things could go wrong. Probably not a issue that even needs resolved then, I might try to do it some other hacky way another time lol. Appreciate you guys thanks for looking into it. This finally got me to come out of the shadows and stop lurking on the forums ๐Ÿ‘บ!
  22. I noticed that if you are just scrolling and are over the element it wont scroll you have to move your mouse to register your on the element then scroll, maybe this is the inconsistency you speak of? Seems like a default browser behavior, this also seems to effect mobile as I some how can get it to not bounce some times. Why ask why? "bud dry!" (sorry I am super corny) This is my first go at Scroll Trigger and I made a Codepen for the challenge this week. I originally had it as a single pin and it does work wonderfully! Though for some reason I felt the user needed t
  23. First off, I wanted my first post to be a big long sappy rant about how much I love GSAP and this community. When I first came back into web dev after a long hiatus (was a big Flash/AS fan) my dreams of a animated interactive web were restored because of you all, and had my eyes opened to a world I thought lost in this new era of webdesign. (PointC's post moved me, I then committed to start my own journey) So maybe I will write about it some time, but for now..... So I have a pinned object that is scrollable and then a pin a element inside it with a scrub an animation. Runs great