Solved

HELP! Animating heading using Animista css...

Mark_S155
Tourist
15 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!
 
 
Accepted Solution (1)
Be_Steven
Shopify Partner
142 28 39

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.
I'm looking for a remote job. Please contact me via besteven0912@gmail.com

View solution in original post

Replies 9 (9)

Be_Steven
Shopify Partner
142 28 39

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.
I'm looking for a remote job. Please contact me via besteven0912@gmail.com
Mark_S155
Tourist
15 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>

Be_Steven
Shopify Partner
142 28 39

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.
I'm looking for a remote job. Please contact me via besteven0912@gmail.com
Mark_S155
Tourist
15 0 2

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

Be_Steven
Shopify Partner
142 28 39

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.
I'm looking for a remote job. Please contact me via besteven0912@gmail.com
Mark_S155
Tourist
15 0 2

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

Be_Steven
Shopify Partner
142 28 39

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.
I'm looking for a remote job. Please contact me via besteven0912@gmail.com
Mark_S155
Tourist
15 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!

Be_Steven
Shopify Partner
142 28 39

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.
I'm looking for a remote job. Please contact me via besteven0912@gmail.com