Jump to content
Search Community

Separate easing for opacity?

wefwef test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

After 1-hour searching I give up! And decide to register on forum. 

 

Is it possible to have separate easings for each values? For example here, opacity with this easing looks ugly, so I want opacity linear, while still having other stuff with easing

 

timeline
        .from(el, 0.850, {
          y: 50,
          opacity: 0,
          ease:Elastic.easeOut,
          onComplete: () => {
            done()
          }
        })

 

Is it possible?

Link to comment
Share on other sites

I don't understand your solution. This is my current code

 

const timeline = new TimelineMax()
      timeline
        .from(el, 0.850, {
          y: 50,
          opacity: 0,
          ease:Elastic.easeOut,
          onComplete: () => {
            done()
          }
        })
        .staggerFrom(this.$refs['fullscreen-nav-menu-item'], 1, {
          y: 50,
          opacity: 0,
          ease:Elastic.easeOut,
        }, 0.05, "-=0.8")

 

Also, does this mean GSAP doesn't have something like this?

 

opacity: {
          value: [0, 1],
          easing: 'easeOutExpo',
        }

 

Link to comment
Share on other sites

From your code, I don't know what you're after. Please create a Code Pen to isolate your issue and I can help you further. At a quick glance (and with some assumptions), I would think you're looking for

 

const timeline = new TimelineMax()
      timeline
        .from(el, 0.850, {
          opacity: 0, // Only opacity here with the following ease
          ease:Elastic.easeOut,
          onComplete: () => {
            done()
          },
          'someLabel' // Create the label for the Timeline position and set position
        })
        .from(el, 0.850, {
          y: 50, // // Only y here with the following ease
          ease: SOME-OTHER-EASE,
          onComplete: () => {
            done()
          },
          'someLabel' // Set position (to label created above)
        })
        .staggerFrom(this.$refs['fullscreen-nav-menu-item'], 1, {
          y: 50,
          opacity: 0,
          ease:Elastic.easeOut,
        }, 0.05, "-=0.8")

 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...