Animations

This is the Groove Digital animation library. In here you can find multiple reusable and easily copyable animations and animated elements.

‍

How to use the animations

‍

  1. Check the animation library page.
  2. Copy and paste the attribute name and attribute value.
  3. Paste the attribute name and value in the settings tab of the text element you want to animate.

‍

Do you want to create animations?
  1. Select the element that you want to animate.
  2. Click on the interactions tab
  3. Make sure the GSAP interactions panel is selected. If not, select it on the bottom of the interactions tab.
  4. Select the trigger that you want for the animation.
  5. In the trigger tab, click the trigger.
  6. Select 'Attribute' as the target.
  7. Set the attribute name in the format [element type + broad action + trigger] in lowerCamelCase e.g. textRevealScroll
  8. Set the attribute value as the specific animation action in lowerCamelCase e.g. wordsRandom
  9. Close the trigger tab.
  10. Click 'Add an action...'
  11. Make sure you name the interaction properly according to the Finsweet Client First naming
  12. Element [Action + State]‍
    1. Element is the section/div/button/etc. that we apply the interaction to.‍
    2. Action describes the interaction. Add State if valuable for context.
    3. If we need to add more information to our interaction name, we can use keywords to help us understand the trigger.
    4. See the full Finsweet article for more information (here).

Good to know

The animations are presets, so if you’d like to make any changes, you can adjust them to your heart’s desire. As long as you change it in the elements interactions tab (right side of the screen), not in the actions presets tab (the left side on the screen).

Text

‍

How to use the text animations

‍

  1. Check the animation library page.
  2. Copy and paste the attribute name and attribute value.
  3. Paste the attribute name and value in the settings tab of the text element you want to animate.
Page load animations

1. textRevealPage=staggerFade

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

2. textRevealPage=linesBottomUp

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

3. textRevealPage=lettersRandom

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

4. textRevealPage=wordsRandom

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

5. textRevealPage=wordsRotateIn

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

6. textRevealPage=wordsCenterSlideUp

Discipline lifts you above all possible excuses

7. textRevealPage=wordsSlideUp

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

8. textRevealPage=linesSlideIn

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

Scroll animations

1. textRevealScroll=staggerFade

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

2. textRevealScroll=linesBottomUp

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

3. textRevealScroll=lettersRandom

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

4. textRevealScroll=wordsRandom

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

5. textRevealScroll=wordsRotateIn

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

6. textRevealScroll=wordsCenterSlideUp

Discipline lifts you above all possible excuses

7. textRevealScroll=wordsSlideUp

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

8. textRevealScroll=linesSlideIn

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

Scroll scrub animations

1. textRevealScroll=staggerFadeScrub

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

2. textRevealScroll=linesBottomUpScrub

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

3. textRevealScroll=lettersRandomScrub

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

4. textRevealScroll=wordsRandomScrub

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

5. textRevealScroll=wordsRotateInScrub

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

6. textRevealScroll=wordsCenterSlideUpScrub

Discipline lifts you above all possible excuses

7. textRevealScroll=wordsSlideUpScrub

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

8. textRevealScroll=linesSlideInScrub

We partner with growth-minded businesses to build no-code and low-code digital experiences that look stunning and perform even better.

9. textStaticAnimation=waves

Surf around

Surf around

10. textStaticAnimation=typing

Meanwhile, in a land far away...  
The designer promised this would be done yesterday.  
But alas, here we are.  
Still waiting.  
Still animating.  
Still pretending this text means something.
Lorem ipsum walked into a bar...  
No one understood him,  
but he ordered two beers anyway.  
Cheers to filler text!
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Buttons

‍

How to use the button animations

‍

IMPORTANT: Buttons require some different helping elements which may be hidden to start with. Because of this, you need to go through the following steps to copy a button with the animation:

  1. Copy the link block.
  2. Make sure the attribute name and value correspond to the animation you want.
  3. To style the button, add combo classes to make sure the animation behaviour doesn't change

‍

1. buttonHover=textSlideUp

Note: In this button there are 2 text elements that need to be changed to the needed text.

Button text
‍

Button text
‍

2. buttonHover=circleFiller

Button text

3. buttonHover=borderGlow

Button text

4. buttonHover=crossingShine

Button text

5. buttonHover=circleGrow

Button text

6. buttonHover=appearSubtext

Contact
100% free

Images

‍

IMPORTANT: Same as for the buttons, these require some different helping elements which may be hidden to start with. Because of this, you need to go through the following steps to copy an element with the animation:

  1. Copy the link block.
  2. Make sure the attribute name and value correspond to the animation you want.
  3. To style the element, add combo classes to make sure the animation behaviour doesn't change

‍

1. imageScroll=parallax

2. imageHover=zoom

3. imageHover=rotate

4. divScroll=zoomFullWidthScrub

Widgets

‍

IMPORTANT: Same as for the buttons and images, these require some different helping elements which may be hidden to start with. Because of this, you need to go through the following steps to copy an element with the animation:

  1. Copy the link block.
  2. Make sure the attribute name and value correspond to the animation you want.
  3. To style the element, add combo classes to make sure the animation behaviour doesn't change

‍

‍

1. accordionClick=openSingle

Link: lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Link: lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

2. accordionClick=openMultiple

Link: lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Link: lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

3. click=cardFlipY

Front

Lorem ipsum dolor sit amet. Non cupiditate ipsa aut accusamus quis id reiciendis quaerat quo aliquam quos ab magnam officiis 33 eius deleniti ut consequuntur officia. Qui quisquam tempora aut itaque omnis sit atque fugiat non accusamus sunt. Id voluptate dolor sed repellat tempore et eius recusandae et fugit perferendis et incidunt voluptatem. Sed internos galisum aut explicabo omnis in voluptates veniam aut aperiam consequatur et officiis praesentium.

Back

Lorem ipsum dolor sit amet. Non cupiditate ipsa aut accusamus quis id reiciendis quaerat quo aliquam quos ab magnam officiis 33 eius deleniti ut consequuntur officia. Qui quisquam tempora aut itaque omnis sit atque fugiat non accusamus sunt. Id voluptate dolor sed repellat tempore et eius recusandae et fugit perferendis et incidunt voluptatem. Sed internos galisum aut explicabo omnis in voluptates veniam aut aperiam consequatur et officiis praesentium.

3. click=cardFlipX

Front

Lorem ipsum dolor sit amet. Non cupiditate ipsa aut accusamus quis id reiciendis quaerat quo aliquam quos ab magnam officiis 33 eius deleniti ut consequuntur officia. Qui quisquam tempora aut itaque omnis sit atque fugiat non accusamus sunt. Id voluptate dolor sed repellat tempore et eius recusandae et fugit perferendis et incidunt voluptatem. Sed internos galisum aut explicabo omnis in voluptates veniam aut aperiam consequatur et officiis praesentium.

Back

Lorem ipsum dolor sit amet. Non cupiditate ipsa aut accusamus quis id reiciendis quaerat quo aliquam quos ab magnam officiis 33 eius deleniti ut consequuntur officia. Qui quisquam tempora aut itaque omnis sit atque fugiat non accusamus sunt. Id voluptate dolor sed repellat tempore et eius recusandae et fugit perferendis et incidunt voluptatem. Sed internos galisum aut explicabo omnis in voluptates veniam aut aperiam consequatur et officiis praesentium.

4. pageLoad=scrollingText

Be

Fast

Smart

Diligent

Focused

5. borderRadiusRevealScroll=top
borderRevealRadiusValue=4rem

Once upon a time, this card was a proud rectangle, standing tall and edgy. But as you scroll, destiny reshapes it. The angles soften, the personality changes, and by the end… it might just become a circle. Legends call this the ‘Journey of the Border Radius.’

5. borderRadiusRevealScroll=bottom
borderRevealRadiusValue=5rem

Once upon a time, this card was a proud rectangle, standing tall and edgy. But as you scroll, destiny reshapes it. The angles soften, the personality changes, and by the end… it might just become a circle. Legends call this the ‘Journey of the Border Radius.’

5. borderRadiusRevealScroll=all
borderRevealRadiusValue=6rem

Once upon a time, this card was a proud rectangle, standing tall and edgy. But as you scroll, destiny reshapes it. The angles soften, the personality changes, and by the end… it might just become a circle. Legends call this the ‘Journey of the Border Radius.’

6. divScroll=scrollRight

7. divScroll=colorSwap

Notes:

  • class 'color-swap_secondary-color' is added to the class with the attribute and all of its descendants.

Heading 4

Heading 1

Heading 2

Heading 3

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

8. divScroll=cardShrinkScroll

9. customCursorTarget=[IDENTIFIER]
     customCursorRotate=true
     customCursorRotateOffset=45deg
     customCursorRotateSmooth=0.1
     customCursorHideDefault=true

9. customCursor=[IDENTIFIER]

10. divHover=cursorGlow
     glowColor=[color-hex];
     glowRadius=[0.01 - 1.00];