HELP! Animating heading using Animista css...

Solved
Mark_S155
Tourist
13 0 2

Greetings!

Can someone please can help me fix an issue animating this header "Rhythmic" which is inside a text columns with image section:

 

Screen Shot 2021-04-16 at 11.32.09 AM.pngScreen Shot 2021-04-16 at 11.32.28 AM.png

 

I've added: @import "animations.css" to the bottom of my theme.scss.liquid  and created a new asset called animations.css

I then tried placing the following script inside, but cannot get the animation to work:

<style>
.tracking-in-expand {
-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
 
/* ----------------------------------------------
 * Generated by Animista on 2021-4-16 10:57:2
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
 
/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
</style>
<h3 class="Heading u-h2">Rhythmic</h3>
 
Can someone please tell me what I'm doing wrong? Your help is much appreciated!
 
 
0 Likes
Quyen_Beo
Explorer
58 7 12

You are using wrong class on CSS that not exist in your <h3> tag.


Solution 1: In HTML add 'tracking-in-expand' to class of your <h3> tag

.tracking-in-expand {
-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}


<h3 class="Heading u-h2 tracking-in-expand">Rhythmic</h3>


Solution 2: In style replace '.tracking-in-expand' by '.Heading'

.Heading {
-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}


<h3 class="Heading u-h2">Rhythmic</h3>

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
0 Likes
Mark_S155
Tourist
13 0 2

Thank you for your reply!

I must still be doing something wrong... would the full style be this?

<style>
.Heading {
-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
/* ----------------------------------------------
* Generated by Animista on 2021-4-16 13:45:36
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation tracking-in-expand
* ----------------------------------------
*/
@-webkit-keyframes tracking-in-expand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
@keyframes tracking-in-expand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
</style>
<h3 class="Heading u-h2">Rhythmic</h3>

0 Likes
Quyen_Beo
Explorer
58 7 12

I tried your code and it worked on page load or changing from another browser tab to it. Is this what you want?

https://www.loom.com/share/9076bcda2b624e79a64e5c721db6dff8

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
0 Likes
Mark_S155
Tourist
13 0 2

Yes, exactly! For some reason it doesn't seem to be showing when previewing the site. 

0 Likes
Quyen_Beo
Explorer
58 7 12

It's easier for me to help if you share your store URL so I can check what happen on your site.

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
0 Likes
Mark_S155
Tourist
13 0 2

Just sent you a message. I'm new to working with css and I really appreciate the help

0 Likes
Quyen_Beo
Explorer
58 7 12

This is an accepted solution.

You should add these CSS lines to bottom of theme.scss file then Save.

.Heading {-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;}
@-webkit-keyframes tracking-in-expand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
@keyframes tracking-in-expand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}

Quyen_Beo_0-1618597328770.png


After that it will have the animation only on the first page load. If you want it animate when you scroll to it, you need to use javascript library. example this library:
https://michalsnik.github.io/aos/

 

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
Mark_S155
Tourist
13 0 2

Ah, thanks for that. 

I am trying to add that animation just on the headings for that section alone, #shopify-section-16184798688d35dade, but one after the other consecutively. 

I'd like it to animate when scrolling, but I don't know how to add javascript in. 

 

Thank you anyway!

0 Likes
Quyen_Beo
Explorer
58 7 12

Thank you for accept my solution.

If you want the scroll function, find a developer to do it for you. It would take 1 - 2 hours making it worked.

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
0 Likes