Jump to content

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

Ginger Soul

  • Posts

  • Joined

  • Last visited

About Ginger Soul

Recent Profile Visitors

2,217 profile views

Ginger Soul's Achievements

  1. Big thanks to @ZachSaucier on this one. Helped me with a nice reveal animation today. DB
  2. @OSUblake man, I've heard of the shadow dom but this is the first time I've seen it in action. Behind the times, I guess. Where's the script coming from? Is this more performant? DB
  3. Few thoughts: Web design is a service industry. You're supposed to do what the client wants (or what will delight them), even if it's semantically 'messy' sometimes. If there's a wayward span in your markup, that's what comments are for. There's thousands of lines of code at work getting a website to render stuff; one little UI hack isn't going to tip the scales. Explain what you're doing for the next dev. Being a purist about things like markup and performance usually has me going back to this article. UX wins in my mind.
  4. As someone who gets paid to implement solutions like this, I'm often glad that a workaround is required. @Cassie just taught me something that I can use to impress my customers: giving the impression of a smoothly animated box shadow that I can throw behind buttons/cards to add depth to my designs without introducing jank. Given the fact that it's not straightforward, it's going to be that much harder for other developers (competitors, peers, etc) to implement, which adds value to my offerings. If web design was straightforward, easy, and simple, I'd be out of a job. So while I'm optimistic that browser performance and CSS specs will improve over time, and that this 'hack' may be unnecessary in a couple years, it puts me on the cutting edge and I'm going to run with it Dave
  5. Props to @ZachSaucier for knocking three issues out in the same thread DB
  6. Right after I posted this, I thought I should clarify something. It'd be great to see a few examples from the GSAP team (CodePen collection anyone?) that cover best practices around 'toggling' or 'two-part, back and forth' animations, whether that's a simple dropdown menu (that either reverses itself with a reverse() call or uses a completely different tween/timeline for the 'reversal'), or a modal/dialog that flies in with one timeline (say, flying in from the top of the viewport) and vanishes (say, by scaling to 0.8 and autoAlpha:0, poof!) with another timeline. Or a snazzy mouseover/mouseout hover timeline on a card. Two-parters. In, and out. I see a lot of these scattered, 'how do I change props on reverse' threads, and I'll say this: I completely understand the logic of why you need to split that logic into two timelines. I've seen @GreenSock explain it a few times. I think the main concern from these submitters is that a 'power4.out' curve looks awesome coming in, but 'takes a while' to leave when the exit animation is triggered with a reverse() call. A reverse timescale speed-up is kind of a band-aid in this situation - the animation just looks better if you can also 'power4.out' the exit animation too. So, some best practices around 'Timeline Toggles' would be awesome to see as a reference. DB
  7. I'm curious about this pen that @ZachSaucier created above. I'm trying to do something similar, but with timelines instead of tweens. My problem is, both 'back and forth' timelines play once, but when I try to play the 'forwards' timeline after having reversed it, its timeline progress is at 1 and it doesn't 'play again.' I'm trying to avoid simply 'reversing' the timeline animation. For things like dropdowns, it's nice to have the ease-out animation going both ways, as was echoed in the threads above. Can you show an example of this 'toggling' behavior with two timelines (ideally with multiple steps) instead of two tweens? Or should I set up the pen Thx! DB
  8. Perfect, thanks - the answer is to add the CSS to set things up. Appreciate the speedy response!
  9. Hey, wasn't able to find this in the docs. Let's say you want to animate something that's above the fold from zero opacity when the page loads (without using CSS to set the element's initial opacity to zero), but you don't want this scenario with the 'from' tween: 1. You see the element briefly (a 'flash of un-set content,' if you will), 2. the 'from' tween gets evaluated and 'sets' the opacity to zero, 3. the tween executes and animates the element 'back' to 1. I'd like to 'hide the entire layout' with a body opacity=0 while a series of 'from' tweens are setting up their values, but I'm not sure when to, uh, lift that curtain (aka transition the body opacity to 1) and allow the tweens to do their animating. Hope this makes sense. Thanks for any insights DB
  10. Man, I just spent 90 minutes Googling and I'm so glad this thread existed Never shut down the messageboard, it's so vital to finding solutions to these types of conflicts! DB
  11. Thanks, Zach. I'll put something together for you. Sorry for leaving that out, this was so...speculative that it seemed like I should ask first. DB
  12. Gonna guess this is a no. I'll try to re-jigger the architecture on my end to place the timelines inside the proper .matchMedia functions. DB
  13. Hey folks, Long time since my last post, but I've been working with GSAP again and I'm loving the Scrolltrigger. I'm curious if there is any way to get matchMedia functionality inside a timeline, or if there are other ways to reference it besides wrapping all your timelines with the matchMedia function. Can you 'ask' the matchmedia function whether it matches, on a timeline-by-timeline basis? I'm imagining something like this (pardon me if this looks ridiculous, I'm working on populating a timelines object from data-attributes using a loop, and wrapping all the 'eaches' in the 'kosher' matchMedia way is proving difficult). tl = gsap.timeline({ scrollTrigger: { matchMedia: '(min-width:800px)', trigger: '.element', start: 'top bottom', end: 'bottom top', scrub: true } }); // end timeline Thanks, DB