PointC last won the day on February 20

PointC had the most liked content!

PointC

Moderators
  • Content count

    1,781
  • Joined

  • Last visited

  • Days Won

    143

PointC last won the day on February 20

PointC had the most liked content!

Community Reputation

4,071 Superhero

4 Followers

About PointC

  • Rank
    Moderator

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Seattle area
  • Interests
    web design, motion graphics, 3D animation, video production, all things sci-fi, Mt. Rainier hiking and my dachshunds

Recent Profile Visitors

19,072 profile views
  1. SVG wave animation

    That made me chuckle a bit because I feel your pain @smallio. I've been using GSAP and JS for a few years now and I'm much better than I used to be, but I'm also still in awe of @OSUblake. At least I can now read his alien language. I have more experience in After Effects just like you so I know exactly how you're feeling some days. You're on the right track though. Just try to learn a little bit each day and you'll start to feel more confident and knowledgeable as time goes by. I promise you'll start to have more and more 'ah-ha' moments and things will really start clicking. If you've never read my 1 year anniversary post, it may give you some encouragement. Good luck and happy tweening.
  2. CSSRulePlugin cannot access rules

    Hi @hemmoleg Are you saying the CodePen demo isn't working for you in Chrome? Or are you only seeing errors in your local testing? I ask because the demo works fine for me in all browsers. I also noticed you're using the /latest/ directory for the scripts. Those are actually older versions of TweenMax and the CSSRule plugin. For the latest versions, please use these links instead. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/plugins/CSSRulePlugin.min.js"></script> Happy tweening.
  3. Hi @Woohoo That falls outside the scope of GSAP, but it sounds like you're looking for info about HTML5 local storage. Here are some links that may help. https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage Happy tweening.
  4. Stretchy/Squishy Line Animation

    @GreenSock FTW! That's a cool idea there Jack.
  5. Looping through children of a SVG <g>

    Hi @athuillier Welcome to the forum. In addition to @Sahil's excellent advice, I'd add that if you do want to loop through a group, it's easy to do so. Here's a basic example: Using that same technique, you could add all those individual animations to a master timeline for complete control. Happy tweening.
  6. I see - each of the <li> elements is its own trigger on the way out. That's the part I was misunderstanding on the first demo. It looks like you have it working now, but if you have more questions or problems when you add new elements, please post an updated demo and we'll do our best to help. Happy tweening.
  7. Stretchy/Squishy Line Animation

    Hi @callmegoon Welcome to the forum. If I understand your question correctly, I think you'll find the drawSVG plugin most helpful. Here's a fork of your pen: Is that what you needed? Here's some more info about DrawSVG: https://greensock.com/docs/Plugins/DrawSVGPlugin DrawSVG is a Club GreenSock bonus plugin. (many others included too) Here's some info about the club: https://greensock.com/club Hopefully that helps. Happy tweening and welcome aboard.
  8. Hi @andrewnelson Welcome to the forum and thanks for joining Club GreenSock. I'm not 100% clear on what you're trying to accomplish here. There are several scripts missing from your demo (ScrollMagic, ScrollMagic Indicators & the GSAP plugin for ScrollMagic). You'll also need to define a controller so the scenes can be added to it. Here's a fork of your demo with those changes. I just set some other properties so you can see what's happening. It's always easier to debug ScrollMagic using the indicators so I've turned those on as well. You are running an each() loop on the <ul>, but you only have one <ul> and then another each() on the <li> tags so I'm a bit confused. What exactly should be happening? It looks to me like you want to stagger each <li> into view as soon as the <ul> enters the screen and then fade the entire <ul> when it hits the top. Is that accurate? You can fork my demo and make more changes, but some more info about the desired outcome would be most helpful in getting better answers for you. Happy tweening and welcome aboard.
  9. svg objects flying off and vibrating after resize

    hmmm... not sure what to tell you. I'm just not seeing that. Maybe a weird graphics card glitch? Have you tried another computer and/or browser for comparison? If anyone else sees that, maybe they can jump in here. I wish I could help more, but it looks fine to me.
  10. svg objects flying off and vibrating after resize

    Are you seeing this in all browsers? I just played and resized it in FF, IE, Edge and Chrome and didn't see anything odd.
  11. MS Edge SVG animation not working properly

    Hi @candybanners It looks like Edge doesn't like the way you structured your clip path. If you add the rectangle directly to the clip-path without using <use> it seems to work just fine in all browsers. Hopefully that helps. Happy tweening.
  12. Starting positions for animated elements.

    Hi @Daniel Park I can't speak for everyone else, but my general rule of thumb is I use GSAP to set() everything I plan to animate. If a property is not going to change, I use my stylesheet. If you're triggering animations on scroll, you wouldn't even need to set() them. You could simply use a from() tween and they'll be all ready for you to tween when you hit the scroll trigger. As far as performance and the FPS drops you're seeing, we'd have have to know what you're animating. Are they large SVGs and pushing the browser a bit too hard? Ultimately, GSAP is animating values and a lot depends on what you have moving on the screen and how hard you're making the browser work. I'm not sure if that helps at all, but that's my two cents worth. Others may jump in here as well. Happy tweening.
  13. Animation performance tips?

    I just tested in Safari and it all seems fine to me.
  14. background transparency only

    It goes gray because the body background is white. The blue is fading out and the white is starting to show. It's starting to mix with the underlying color. If the body was red, the blue fade would appear purple as it changes to transparent. Happy tweening.
  15. GSAP is awesome! No Way to stop and clear animation

    Yeah definitely - if it's inline, it will be erased. The original demo didn't have anything inline so I was assuming stylesheet, but I probably shouldn't assume anything. You got all the extra details covered nicely in your extra demo. Good work.