Jump to content
Search Community

Search the Community

Showing results for tags 'css custom properties'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 2 results

  1. I want to use a CSS custom property that uses a clamp as the start in a ScrollTrigger instead of coding in a pixel value. I have a basic demo here to test it out and it doesn't work. I know the value needs to be converted to a number first, but I don't know how. In my demo you see I tried this: const startValue = gsap.getProperty(".box-wrap", "--start"); When the value of --start in my css is a pixel value like '200px' it works. If I change --start to a clamp, it doesn't. The reason I'm trying to do this: Eventually my client will be choosing the start from a list of values that use clamp for fluid spacing. I don't want to use pixel units because I want it to be fluid and work whether on a small screen or large. Is it possible? Thanks! Clamp examples: --space-s: clamp(1rem, calc(0.96rem + 0.21vw), 1.25rem); --space-m: clamp(1.5rem, calc(1.44rem + 0.32vw), 1.88rem);
  2. i attempted to upgrade gsap version at work and implement a tween of some css variables and immediately found an problem in chrome version 49 which i have personally already bumped into, and not sure what other browsers this could also branch to. to be clear, this is a problem in chrome, but the workaround is easy enough you might want to incorporate it into gsap. in chrome 49 when calling `setProperty` on a css variable that is already declared, rather than replacing the old value, it is added to the element. so throughout the course of a tween, a css variable is then defined on an element many times, which the latest one is always the overriding winner, but there seems to be some performance hits associated with this as well as timing effected. teh known workaround is to call `removeProperty` before calling `setProperty` again. go ahead and try out the jsfiddle in chrome 49 and watch the inspected markup as you click around.
×
×
  • Create New...