Jump to content
Search Community

Easing problem

Alexandra Spalato 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

Hi,

I'm working on this website http://foundationnew.wpengine.com/ (wordpress)

and it's my first greensock animation

I also use scrollmagic

it's quite simple, but as you can see there is a problem with the appearing buttons animation

I try to have other ease but it stays like that

all the code is on github https://github.com/alexadark/foundation/blob/master/assets/js/custom/animation.js

at the top of the file for this animation

I also tried to remove this code and only use keyframes for this part, but te keyframes doesn't work at all, so something is blocking somewhere and I don't understand what it can be

here is the code I used for the keyframes (commented here) 

https://github.com/alexadark/foundation/blob/master/assets/sass/layout/_home.scss

Link to comment
Share on other sites

Hi @Alexandra Spalato,

 

Probably there is a conflict with the css animation for the buttons

 


.button {
  display: inline-block;
  padding: 15px 15px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.4s ease-in-out;   /// !!!!
  transition: all 0.4s ease-in-out;    ///  !!!!
  font-family: 'Avenir';
  font-weight: 500;
  font-size: 1.4rem;
  font-size: 1.6rem;
  color: #ffeae1;
  text-transform: uppercase;
  border-radius: 4px;
  border-bottom: 5px solid;
  letter-spacing: 2.4px; }

 

Kind regards

Mikel

 

 

  • Like 3
Link to comment
Share on other sites

There has to be something producing that effect. My guess would be a conflict between GSAP and CSS as @mikel discovered. Are you sure you've removed all the CSS transitions for the button class? (and any other class that may be applied to that element) It looks like it's been set to something like a  Power4.easeIn, but no ease is specified in the tween so it's coming from somewhere. Trying removing the GSAP tweens and see what happens.

 

It's extremely difficult to look through all your files. If you can reproduce the problem in a simplified demo, we could better assist you.

  • Like 2
Link to comment
Share on other sites

  • 3 years later...
On 7/2/2019 at 9:09 AM, mikel said:

Hi @Alexandra Spalato,

 

Probably there is a conflict with the css animation for the buttons

 


.button {
  display: inline-block;
  padding: 15px 15px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.4s ease-in-out;   /// !!!!
  transition: all 0.4s ease-in-out;    ///  !!!!
  font-family: 'Avenir';
  font-weight: 500;
  font-size: 1.4rem;
  font-size: 1.6rem;
  color: #ffeae1;
  text-transform: uppercase;
  border-radius: 4px;
  border-bottom: 5px solid;
  letter-spacing: 2.4px; }

 

Kind regards

Mikel

 

 

 

This CSS conflict was causing issues for me on another project - I just stumbled across this post and found my problem!  Thanks!

  • Like 1
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...