Jump to content

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

Cassie last won the day on June 13

Cassie had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Posts posted by Cassie

  1. Hey there! We can usually help more effectively if you provide a minimal demo, codepen is great for this.

    It's very hard to understand what the issue is from code snippets alone. When you post a demo - could you also explain what you mean by 'the animation still bugs'

    You are animating elements and using the same element as the trigger which can cause buggy behaviour, it's best not to animate the trigger element! I often use containing elements as triggers instead.

    Also - maybe this post will help you with best practises.


    • Like 1

  2. You can use transforms (x, y, xPercent, yPercent, rotate) etc to move elements around.

    See the Pen 2d11cc626340b774c81d6f029722fcf0?editors=1010 by cassie-codes (@cassie-codes) on CodePen


    Path animations are quite complex, but a lot of fun to dig into.

    I find they're often overkill for small icon animation though and you can achieve the same visual effect using clever opacity fades between shapes. If you want to go that route, we have a plugin for shape morphing - 


    This is also a good thread should you want to try and animate points by hand.

    Good luck!


    • Like 3
  3. Screenshot 2021-06-15 at 14.03.24.png

    You need to add the correct resources in the resources panel in your pen settings. You were using GSAP, but loading tweenMax. You also didn't have jQuery loaded.

    You can type the name of the library you need in the search or paste in CDN links.

    Here you go - this one's got what you need.

    See the Pen zYZypdN?editors=1111 by GreenSock (@GreenSock) on CodePen

    I don't know what this is but it's definitely nothing to do with GreenSock!

    2 hours ago, BennyTuner said:

    Loading failed for the <script> with source “https://srv.buysellads.com/ads/CKYDVK7U.json?callback=customJSONPCallback”.

    and errors

    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.speedcurve.com/js/lux.js?id=410041. (Reason: CORS request did not succeed).


    • Like 2
  4. Sorry about this pal.

    Obviously if any of us were to spot an issue within the code snippet you provided we would point it out!
    It's not imperative that you provide a demo, however a lot of issues are incredibly hard to spot without a look at the context the problem is occurring within, and this problem falls into this category.


    We also don't only offer help to Club GSAP members. These forums are for everyone that needs help.


    • Like 5
  5. So what I'd probably do is try to narrow down the issue.

    Can you apply a simple tween to a DOM element, without CSS vars, using the custom wiggle?

    If you can then try with CSS vars, then with a pseudo element, then you'll know where the issue is. I suspect it's an issue with including customEase or customWiggle? 

    Let me know how you get on!

    • Like 1
  6. SCSS variable and CSS variables shouldn't 'clash' - they achieve different purposes. 

    CSS custom properties are evaluated by the browser at runtime. SCSS variables aren't, think of CSS vars as a bridge between CSS and Javascript.

    • Like 2