# Animations

**URL:** https://forum.readymag.com/c/animations/14.md?page=4

[Latest](https://forum.readymag.com/latest.md) · [Categories](https://forum.readymag.com/categories.md)

**Page:** 5

---

## [How would I create animated icons like these?](https://forum.readymag.com/t/how-would-i-create-animated-icons-like-these/3935)

<div class="topic-metadata">

**Author:** [@kendrajoele](https://forum.readymag.com/u/kendrajoele)\
**Replies:** 1\
**Last updated:** [November 22, 2024, 3:08pm UTC](https://forum.readymag.com/t/how-would-i-create-animated-icons-like-these/3935 "2024-11-22T15:08:51Z")

</div>

This portfolio has beautiful animated icons for the designer’s projects. I was wondering how to make something like this for my portfolio. Would I be using Lottie animations?

---

## [Make dropdown menu disappear on click-away](https://forum.readymag.com/t/make-dropdown-menu-disappear-on-click-away/3862)

<div class="topic-metadata">

**Author:** [@Angus](https://forum.readymag.com/u/Angus)\
**Replies:** 1\
**Last updated:** [November 15, 2024, 2:01pm UTC](https://forum.readymag.com/t/make-dropdown-menu-disappear-on-click-away/3862 "2024-11-15T14:01:30Z")

</div>

I’ve made a drop down menu using an opacity animation on the sub-menu elements. How can I make the drop down menu disappear if the user clicks anywhere else on the website? Thanks

---

## [Assistance with Two Possible Text Animations](https://forum.readymag.com/t/assistance-with-two-possible-text-animations/3788)

<div class="topic-metadata">

**Author:** [@Phearhead](https://forum.readymag.com/u/Phearhead)\
**Replies:** 1\
**Last updated:** [November 11, 2024, 10:44pm UTC](https://forum.readymag.com/t/assistance-with-two-possible-text-animations/3788 "2024-11-11T22:44:34Z")

</div>

Hello! I’m hoping to try to animate the links on my Readymag site, with two different options. Whichever is more feasible… 1.) Preferred method - a text scramble that reveals the link again after it is hovered. 2.) A …

---

## [Video play on hover & trigger text opacity in](https://forum.readymag.com/t/video-play-on-hover-trigger-text-opacity-in/3842)

<div class="topic-metadata">

**Author:** [@Wilbur\_Roberts](https://forum.readymag.com/u/Wilbur_Roberts)\
**Replies:** 1\
**Last updated:** [November 8, 2024, 2:00pm UTC](https://forum.readymag.com/t/video-play-on-hover-trigger-text-opacity-in/3842 "2024-11-08T14:00:03Z")

</div>

Hello, I’m trying to create a video grid where the individual video assets play on hover animation and also trigger text to opacity 0 - 100 in. Once I place the cursor to hover over the video and the text animates in, …

---

## [Menu fade out and in when scrolling](https://forum.readymag.com/t/menu-fade-out-and-in-when-scrolling/1485)

<div class="topic-metadata">

**Author:** [@CrispDesigns](https://forum.readymag.com/u/CrispDesigns)\
**Replies:** 1\
**Last updated:** [November 6, 2024, 8:10am UTC](https://forum.readymag.com/t/menu-fade-out-and-in-when-scrolling/1485 "2024-11-06T08:10:21Z")

</div>

Hello! I am trying to make the menu fade out when scrolling down and fade in when scrolling up (like in the example website I attached). Is this possible without using code? Thank you! https://www.kevincraftdesign.com/

---

## [Animation flickering on hover](https://forum.readymag.com/t/animation-flickering-on-hover/2984)

<div class="topic-metadata">

**Author:** [@disco](https://forum.readymag.com/u/disco)\
**Replies:** 4\
**Last updated:** [November 4, 2024, 9:07am UTC](https://forum.readymag.com/t/animation-flickering-on-hover/2984 "2024-11-04T09:07:26Z")

</div>

I’m trying to create an animation where a widget opacity changes from 0 to 100 when you hover over an image (the “trigger widget”). My issue is that when the animated widget is placed directly above the “trigger” widget…

---

## [Move on scroll animation stuttering](https://forum.readymag.com/t/move-on-scroll-animation-stuttering/1062)

<div class="topic-metadata">

**Author:** [@AA\_jeanjulien](https://forum.readymag.com/u/AA_jeanjulien)\
**Replies:** 9\
**Last updated:** [October 31, 2024, 8:00am UTC](https://forum.readymag.com/t/move-on-scroll-animation-stuttering/1062 "2024-10-31T08:00:49Z")

</div>

Hi beautiful readymag community, I use the move functionality on a project I am working on right now (https://mini-maison.ca) to keep certain elements in place while scrolling down. It was pretty smooth until a few week…

---

## [Animation question](https://forum.readymag.com/t/animation-question/3806)

<div class="topic-metadata">

**Author:** [@supedup](https://forum.readymag.com/u/supedup)\
**Replies:** 0\
**Last updated:** [October 29, 2024, 3:36pm UTC](https://forum.readymag.com/t/animation-question/3806 "2024-10-29T15:36:27Z")

</div>

hey guys I’m kinda new to the whole Readymag “world” and I’m designing a website for my E-shop! I’m trying to play around with the animations and came across a few questions. the concept is an online shop for my clothing…

---

## [How to divide a page](https://forum.readymag.com/t/how-to-divide-a-page/3754)

<div class="topic-metadata">

**Author:** [@vedenkotanya](https://forum.readymag.com/u/vedenkotanya)\
**Replies:** 0\
**Last updated:** [October 20, 2024, 10:19pm UTC](https://forum.readymag.com/t/how-to-divide-a-page/3754 "2024-10-20T22:19:51Z")

</div>

Hello to everyone Maybe someone can help me to find a tool how to divide a page in two blocks like on the screenshot? On the first part every text row is a link, on the second part you can just scroll pictures and yo…

---

## [Hover to bring photo to front](https://forum.readymag.com/t/hover-to-bring-photo-to-front/3631)

<div class="topic-metadata">

**Author:** [@karly\_yu](https://forum.readymag.com/u/karly_yu)\
**Replies:** 2\
**Last updated:** [October 15, 2024, 2:41pm UTC](https://forum.readymag.com/t/hover-to-bring-photo-to-front/3631 "2024-10-15T14:41:21Z")

</div>

Hi! I am new to Readymag and working on my portfolio. Would like to ask is there a way to make the photo bring to front when you hover it on top?? Thanks a lot!!

---

## [Toggle section, button states](https://forum.readymag.com/t/toggle-section-button-states/2965)

<div class="topic-metadata">

**Author:** [@David\_Pindrys](https://forum.readymag.com/u/David_Pindrys)\
**Replies:** 5\
**Last updated:** [October 12, 2024, 10:38am UTC](https://forum.readymag.com/t/toggle-section-button-states/2965 "2024-10-12T10:38:54Z")

</div>

Hi folks! Here again with another toggle question. This time I decided that it would definitely be easier if using the Readymag button element. Here’s a shot of the elements: I’d like the buttons to: have hover stat…

---

## [Hover animation stops working when scroll animation added](https://forum.readymag.com/t/hover-animation-stops-working-when-scroll-animation-added/3615)

<div class="topic-metadata">

**Author:** [@jrubesch](https://forum.readymag.com/u/jrubesch)\
**Replies:** 1\
**Last updated:** [October 8, 2024, 9:28am UTC](https://forum.readymag.com/t/hover-animation-stops-working-when-scroll-animation-added/3615 "2024-10-08T09:28:26Z")

</div>

Hi! I had some text boxes that moved a little with hover. The animation was working fine until I added another animation on scroll to those same texts. There are a total of 3 text boxes in each set, so 6 in total in this…

---

## [Content blocks scrolling horizontally](https://forum.readymag.com/t/content-blocks-scrolling-horizontally/3477)

<div class="topic-metadata">

**Author:** [@David\_Pindrys](https://forum.readymag.com/u/David_Pindrys)\
**Replies:** 2\
**Last updated:** [October 2, 2024, 4:03am UTC](https://forum.readymag.com/t/content-blocks-scrolling-horizontally/3477 "2024-10-02T04:03:12Z")

</div>

Hey gang, I am trying to create a vertically scrolling page that has a section that scrolls horizontally, once you reach it. Ideally, after the content is finished scrolling (to the far right block) you would continue t…

---

## [Text over text hover](https://forum.readymag.com/t/text-over-text-hover/3618)

<div class="topic-metadata">

**Author:** [@jooicy](https://forum.readymag.com/u/jooicy)\
**Replies:** 2\
**Last updated:** [September 28, 2024, 6:50am UTC](https://forum.readymag.com/t/text-over-text-hover/3618 "2024-09-28T06:50:22Z")

</div>

Hi everyone, i’m testing readymag for my website and i really want to animate text hover with another text. : when i put my Cursor on a text, it disappears and another text come up. I tried with two text widget but it…

---

## [Scroll effect on Desktop & Mobile layout](https://forum.readymag.com/t/scroll-effect-on-desktop-mobile-layout/3342)

<div class="topic-metadata">

**Author:** [@Hafsat\_Usman](https://forum.readymag.com/u/Hafsat_Usman)\
**Replies:** 2\
**Last updated:** [September 30, 2024, 7:10am UTC](https://forum.readymag.com/t/scroll-effect-on-desktop-mobile-layout/3342 "2024-09-30T07:10:24Z")

</div>

Hello, could anyone help me with making the scaling the projects on scrolling, just like the effect from the home page like on this website?\[(https://iamrossmason.com/)\] I’ve managed to work out the some elements for th…

---

## [How to make a card open on click](https://forum.readymag.com/t/how-to-make-a-card-open-on-click/3595)

<div class="topic-metadata">

**Author:** [@darya\_atr](https://forum.readymag.com/u/darya_atr)\
**Replies:** 1\
**Last updated:** [September 27, 2024, 8:31am UTC](https://forum.readymag.com/t/how-to-make-a-card-open-on-click/3595 "2024-09-27T08:31:51Z")

</div>

Hi, dear Readymag community. can I make the card (rectangle) go down and become longer (with addition text appearing on it), clicking on the button on the card?

---

## [How do I affix a text box to an oval shape and animate on scroll simultaneously](https://forum.readymag.com/t/how-do-i-affix-a-text-box-to-an-oval-shape-and-animate-on-scroll-simultaneously/1512)

<div class="topic-metadata">

**Author:** [@antmchela](https://forum.readymag.com/u/antmchela)\
**Replies:** 1\
**Last updated:** [April 18, 2023, 9:52pm UTC](https://forum.readymag.com/t/how-do-i-affix-a-text-box-to-an-oval-shape-and-animate-on-scroll-simultaneously/1512 "2023-04-18T21:52:46Z")

</div>

Hello! I’m trying to replicate this websites hovering box. I have used an oval shape and a text box and would like to affix the two together then use the on scroll animation. I’ve added an image below. If this is possib…

---

## [How to stop an animation when another begin?](https://forum.readymag.com/t/how-to-stop-an-animation-when-another-begin/3474)

<div class="topic-metadata">

**Author:** [@Emma\_De\_Volder](https://forum.readymag.com/u/Emma_De_Volder)\
**Replies:** 5\
**Last updated:** [September 26, 2024, 3:32pm UTC](https://forum.readymag.com/t/how-to-stop-an-animation-when-another-begin/3474 "2024-09-26T15:32:00Z")

</div>

Hello everyone! I’ve been trying to create something on my main page, but I’m stuck. The idea is to have four categories (text), and when I click on one, the corresponding images appear. For example, if I click on “Illu…

---

## [Text color scroll reveal with background change](https://forum.readymag.com/t/text-color-scroll-reveal-with-background-change/3542)

<div class="topic-metadata">

**Author:** [@jrubesch](https://forum.readymag.com/u/jrubesch)\
**Replies:** 2\
**Last updated:** [September 26, 2024, 3:11am UTC](https://forum.readymag.com/t/text-color-scroll-reveal-with-background-change/3542 "2024-09-26T03:11:14Z")

</div>

Hi! I am trying to create an effect where when I scroll down, at a point in my page the background will change color (in my case to blue). I have a group of text boxes as my page title I want the colors of the texts to c…

---

## [Is it possible to select part of a text (a word or two) as animation Trigger?](https://forum.readymag.com/t/is-it-possible-to-select-part-of-a-text-a-word-or-two-as-animation-trigger/3612)

<div class="topic-metadata">

**Author:** [@yenihuh](https://forum.readymag.com/u/yenihuh)\
**Replies:** 1\
**Last updated:** [September 25, 2024, 8:18pm UTC](https://forum.readymag.com/t/is-it-possible-to-select-part-of-a-text-a-word-or-two-as-animation-trigger/3612 "2024-09-25T20:18:17Z")

</div>

In this sites, the images appear after hovering the mouse on certain words. How can I do that? Heres is the site:

---

## [Are there options for the user to add an image to an enabled area of ​​the web while they are logged in?](https://forum.readymag.com/t/are-there-options-for-the-user-to-add-an-image-to-an-enabled-area-of-the-web-while-they-are-logged-in/3568)

<div class="topic-metadata">

**Author:** [@jordi\_rovirosa\_rodri](https://forum.readymag.com/u/jordi_rovirosa_rodri)\
**Replies:** 2\
**Last updated:** [September 20, 2024, 7:13pm UTC](https://forum.readymag.com/t/are-there-options-for-the-user-to-add-an-image-to-an-enabled-area-of-the-web-while-they-are-logged-in/3568 "2024-09-20T19:13:11Z")

</div>

Are there options for the user to add an image to an enabled area of ​​the web while they are logged in?

---

## [Split Screen Scrolling Animation](https://forum.readymag.com/t/split-screen-scrolling-animation/3552)

<div class="topic-metadata">

**Author:** [@kalhujay](https://forum.readymag.com/u/kalhujay)\
**Replies:** 1\
**Last updated:** [September 16, 2024, 10:29am UTC](https://forum.readymag.com/t/split-screen-scrolling-animation/3552 "2024-09-16T10:29:41Z")

</div>

I want to re-create the split screen animation from this site’s home page. I’m looking for the images on both the left and right to lockup in place on scroll and then the next images appear on scroll. Any tips or ideas o…

---

## [Fixing an image when click on trigger after apearing when hover](https://forum.readymag.com/t/fixing-an-image-when-click-on-trigger-after-apearing-when-hover/2885)

<div class="topic-metadata">

**Author:** [@alexhiar14](https://forum.readymag.com/u/alexhiar14)\
**Replies:** 2\
**Last updated:** [August 27, 2024, 11:20am UTC](https://forum.readymag.com/t/fixing-an-image-when-click-on-trigger-after-apearing-when-hover/2885 "2024-08-27T11:20:06Z")

</div>

I think the easyest way to explain my problem is using an animated widget that it’s already in the presets of Ready Mag. I´m talking about the HOVERED MENU (add widget \> presets \> animated widgets \> hovered menu). My pro…

---

## [Scroll effect](https://forum.readymag.com/t/scroll-effect/3330)

<div class="topic-metadata">

**Author:** [@alesya.krasovskaya55](https://forum.readymag.com/u/alesya.krasovskaya55)\
**Replies:** 1\
**Last updated:** [August 7, 2024, 7:32pm UTC](https://forum.readymag.com/t/scroll-effect/3330 "2024-08-07T19:32:51Z")

</div>

Hello, could you help me with making this scrolling effect from first page to second one like on this website?https://alexandrachulkova.com/ From page with name to person’s works.

---

## [Falling Text & Slide Text](https://forum.readymag.com/t/falling-text-slide-text/3325)

<div class="topic-metadata">

**Author:** [@Cali](https://forum.readymag.com/u/Cali)\
**Replies:** 0\
**Last updated:** [August 6, 2024, 5:31pm UTC](https://forum.readymag.com/t/falling-text-slide-text/3325 "2024-08-06T17:31:18Z")

</div>

How do I create 2 automation features 1. falling text 2. “text sliding in”. I want the first part of the name of company to fall straight down on sequence, The second part to slide in as one word from left to right and…

---

## [SHOTS autoplay / load](https://forum.readymag.com/t/shots-autoplay-load/3313)

<div class="topic-metadata">

**Author:** [@Joon](https://forum.readymag.com/u/Joon)\
**Replies:** 1\
**Last updated:** [August 4, 2024, 7:12pm UTC](https://forum.readymag.com/t/shots-autoplay-load/3313 "2024-08-04T19:12:47Z")

</div>

How can I autoplay shots? Shots can be only played by hover, scroll, click and mouse move, but I want it to play automatically once the page is loaded since it has a transparent background while video doesn’t… So, is th…

---

## [My shape + animations disappear when I preview](https://forum.readymag.com/t/my-shape-animations-disappear-when-i-preview/3299)

<div class="topic-metadata">

**Author:** [@MOA](https://forum.readymag.com/u/MOA)\
**Replies:** 1\
**Last updated:** [August 2, 2024, 1:04pm UTC](https://forum.readymag.com/t/my-shape-animations-disappear-when-i-preview/3299 "2024-08-02T13:04:31Z")

</div>

So basically when I create a shape without any animations it appears on the preview page, but once I add animations, the shape completely disappears on the preview page. The shape is on top of all the other elements on m…

---

## [Drop Down Menu](https://forum.readymag.com/t/drop-down-menu/1033)

<div class="topic-metadata">

**Author:** [@kelsey\_soka](https://forum.readymag.com/u/kelsey_soka)\
**Replies:** 5\
**Last updated:** [July 26, 2024, 3:55pm UTC](https://forum.readymag.com/t/drop-down-menu/1033 "2024-07-26T15:55:17Z")

</div>

Hello! I’ve made a drop down menu via animations, but currently when I click on a new page from the menu and it takes me to that page the menu stays in place. I’m unsure how to set the menu to disappear once a new page…

---

## [Move elements up while having horizontal scroll](https://forum.readymag.com/t/move-elements-up-while-having-horizontal-scroll/3284)

<div class="topic-metadata">

**Author:** [@kcp](https://forum.readymag.com/u/kcp)\
**Replies:** 0\
**Last updated:** [July 25, 2024, 7:44pm UTC](https://forum.readymag.com/t/move-elements-up-while-having-horizontal-scroll/3284 "2024-07-25T19:44:54Z")

</div>

Hi guys, I please need help. I have a webpage that has a horizontal scroll, but I need an element to move up while the ‘background’ is moving horizontal . Does anyone know how to do this?

---

## [Infinite Running Line W/ Fading Gradient?](https://forum.readymag.com/t/infinite-running-line-w-fading-gradient/3274)

<div class="topic-metadata">

**Author:** [@Nina\_Mitra](https://forum.readymag.com/u/Nina_Mitra)\
**Replies:** 1\
**Last updated:** [July 24, 2024, 8:23pm UTC](https://forum.readymag.com/t/infinite-running-line-w-fading-gradient/3274 "2024-07-24T20:23:30Z")

</div>

Hello all! I recently came across this amazing portfolio: https://www.jwang.work/ I think the website was made on Readymag but i’m not sure? I’d love to replicate the fade in/out with her ‘I AM CURRENTLY Drawing, medit…

[Previous page](https://forum.readymag.com/c/animations/14.md?page=3)

[Next page](https://forum.readymag.com/c/animations/14.md?page=5)
