Shopify themes, liquid, logos, and UX
Greetings!
Can someone please can help me fix an issue animating this header "Rhythmic" which is inside a text columns with image section:
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:
Solved! Go to the solution
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;
}
}
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/
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>
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>
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
Yes, exactly! For some reason it doesn't seem to be showing when previewing the site.
It's easier for me to help if you share your store URL so I can check what happen on your site.
Just sent you a message. I'm new to working with css and I really appreciate the help 🙂🙂
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;
}
}
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/
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!
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024