Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

simple circle animation link not working

Engaged ,
Mar 13, 2025 Mar 13, 2025

to keep things clean- simple circle ripple animation with a link but the link isnt working and i dont know why

 

https://codepen.io/Todd-Heyman/pen/PwoOyGB

 

 

1.4K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 5 Correct answers

Community Expert , Mar 13, 2025 Mar 13, 2025

Short answer: remove position: absolute from the anchor.

 

This works.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animation Test</title>
<style>
html, body {
 margin: 0 auto;
 color: white;
 font-family: 'Montserrat', sans-serif;
}
/* Circle */
.circle {
 height: 80px;
 width: 80px;
 border-radius: 50%;
 background-color: #ff4343;
 display: inline-block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.circle:before, .circle:after {
 content: ''
...
Translate
LEGEND , Mar 19, 2025 Mar 19, 2025
quote

 

 

version 2, i add it outside the div and it doesnt appear

https://pitchlab.net/lowdown/index_fadetest2.html

 

doesnt seem to be a z-index issue.. thoughts?


By @REELHERO

 

You just need to add to the fade-in2 css selector:

 

position: relative;
z-index: 1000;

 

 Then revise the html to:

 

<div class="fade-in2"> 
<a
href="https://pitchlab.net/contact">
<div
class="circle2 shadow">
<p class="circletext"> let's make<br><span class="waves">waves</span><br>hit us up</p>
</div>
</a>
</div>

 

Currently your div/a tags ar

...
Translate
LEGEND , Mar 20, 2025 Mar 20, 2025

@REELHERO wrote:

 

I switched the animation from a fade to a slide up and its not working - Im guessing position is the culprit

 

https://pitchlab.net/lowdown/slidertest.html

 

the circle is in a fixed postion (i want it to stay at approx the bottom of the page where I set it) but I want it to slide up on page load (as the body text does) does the slider/activer animation class need to be relatively positioned here? 

conversely will the slider work if my div is fixed..?


 

 

Add to your css selector 'circl

...
Translate
LEGEND , Mar 20, 2025 Mar 20, 2025

 

 

quote

thank you - 

I wanted to add a delay but it loads then delays.. 

 

https://pitchlab.net/lowdown/index_delay.html

 

using 

 

animation: .7s slide-up cubic-bezier(.37,1.21,.58,1.1);
animation-delay: 1s;

 

is that not correct?


By @REELHERO

 


You have opacity: 1!important set on the .circle2 css selector............so it will show on page load..........set the opacity to 0 WITHOUT adding !important at the end otherwise that will overide the opacity that you have set on the slide_up keyframe animation.

 

Also you

...
Translate
LEGEND , Mar 24, 2025 Mar 24, 2025
quote

And in HOLLA  Id like to make the text on the contact form darker but Ive tried everything to affect that text but no go.. i can change the font but not the color or weight.. not sure why.


By @REELHERO

 

Try:

 

::placeholder {
color: #666666;
opacity: 1;
}
Translate
Community Expert ,
Mar 13, 2025 Mar 13, 2025

Short answer: remove position: absolute from the anchor.

 

This works.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animation Test</title>
<style>
html, body {
 margin: 0 auto;
 color: white;
 font-family: 'Montserrat', sans-serif;
}
/* Circle */
.circle {
 height: 80px;
 width: 80px;
 border-radius: 50%;
 background-color: #ff4343;
 display: inline-block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.circle:before, .circle:after {
 content: '';
 display: block;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 border: 1px solid #ff4343;
 border-radius: 50%;
}
.circle:before {
 animation: ripple 2s linear infinite;
}
.circle:after {
 animation: ripple 2s linear 1s infinite;
}
@keyframes ripple {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
opacity:1;
}
100% {
transform: scale(1.6);
opacity:0;
}
}
/* Text */
.text {
 text-align: center;
 vertical-align: middle;
 line-height: 80px;
 margin: 0;
}
</style>
</head>

<body>
<a href="https://pitchlab.net/showcase">
<!--positioned elements here-->
<div class="circle">
<p class="text">Click me</p>
</div>
</a>

</body>
</html>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 13, 2025 Mar 13, 2025

Had no idea you could position a link and anchor tag around a div!

I tried it every which way to Sunday except that !

Nancy thank you !

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 13, 2025 Mar 13, 2025

It's valid since HTML5. 

In previous HTML versions, it's not valid code.

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 18, 2025 Mar 18, 2025

Nancy a curious thing is happening..

 

the circle link works fine:

https://pitchlab.net/lowdown/

 

but if I add a fade-in class to the div so it can fade in like the rest of the page, it falters:

 

version 1, I add it inside the div, keeping the link outside

https://pitchlab.net/lowdown/index_fadetest1.html

it doesnt fade in

 

version 2, i add it outside the div and it doesnt appear

https://pitchlab.net/lowdown/index_fadetest2.html

 

doesnt seem to be a z-index issue.. thoughts?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 19, 2025 Mar 19, 2025
quote

 

 

version 2, i add it outside the div and it doesnt appear

https://pitchlab.net/lowdown/index_fadetest2.html

 

doesnt seem to be a z-index issue.. thoughts?


By @REELHERO

 

You just need to add to the fade-in2 css selector:

 

position: relative;
z-index: 1000;

 

 Then revise the html to:

 

<div class="fade-in2"> 
<a
href="https://pitchlab.net/contact">
<div
class="circle2 shadow">
<p class="circletext"> let's make<br><span class="waves">waves</span><br>hit us up</p>
</div>
</a>
</div>

 

Currently your div/a tags are closed in the wrong position plus you must remove the second instance of 'fade-in2' from the child div.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 19, 2025 Mar 19, 2025

thanks you Osgood 

I had tried that formation (the fade class in a container wrapping the div) but hadnt added a postion to the fade selector.. I have to spend some time undertanding Positioning and how it affects the elements of a page..

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 19, 2025 Mar 19, 2025
quote I have to spend some time undertanding Positioning...
By @REELHERO

===========

Yup.  Positioning has unwanted consequences that can wreak havoc with your layout.

image.png

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 19, 2025 Mar 19, 2025

Like I said to you and Ben before, I havent gotten to the responsive nature of the site yet Nancy .. youre not suprising me with that screenshot lol but I appreciate the attempt at a zing 🙂  - Im making sure its the way i want it on desktop, and  then thats next..  probably today

 

However note the larger buttons and contrast.. Im paying attention to the rules you posted (though dont post any screenshots of where ive failed please 🙂 - I havent gone over it in detail yet but I will)

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 19, 2025 Mar 19, 2025

Putting the horse behind the cart isn't the best approach here.  

 

Responsive frameworks like Bootstrap are built on a MOBILE FIRST principle.  It just works. No muss, no fuss. No special code or media queries needed. The framework handles all the heavy lifting for you.

https://www.w3schools.com/bootstrap5/

 

But it won't work with positioned elements.

 

 

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 23, 2025 Mar 23, 2025

Totally hear you Nancy I have an urgency of getting this up - dont have time at the moment to learn- I promise you when things settle I will..  hope youve noticed I pay attention - this is all self-taught and Im a commercial director (you should read the article  I wrote for the Hollywood Reporter about the fires and the state of the biz.. it seemed to move Lena and explains the urgency) and not a designer (obviously) so think Ive come far 

 

for now I made the site responsive for mobile (youll only see what I mean if you use a phone or a simulator)

 

https://pitchlab.net/

 

Its working well - only issues Im finding are  - the IN TOUCH link on LOWDOWN seems to be inconsistent.. it doesnt always click seamlessly - not sure why- 

 

And in HOLLA  Id like to make the text on the contact form darker but Ive tried everything to affect that text but no go.. i can change the font but not the color or weight.. not sure why.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 24, 2025 Mar 24, 2025
quote

And in HOLLA  Id like to make the text on the contact form darker but Ive tried everything to affect that text but no go.. i can change the font but not the color or weight.. not sure why.


By @REELHERO

 

Try:

 

::placeholder {
color: #666666;
opacity: 1;
}
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 24, 2025 Mar 24, 2025

perfect!

 

::placeholder  thats a new one to me..thank you!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 24, 2025 Mar 24, 2025
LATEST

any thoughts on the IN TOUCH LINK on LOWDOWN. on mobile?

i checked for overlays or z-index issues and I cant find any - 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 19, 2025 Mar 19, 2025

testing some position for theory so I can learn while I have your attention-

 

I switched the animation from a fade to a slide up and its not working - Im guessing position is the culprit

 

https://pitchlab.net/lowdown/slidertest.html

 

the circle is in a fixed postion (i want it to stay at approx the bottom of the page where I set it) but I want it to slide up on page load (as the body text does) does the slider/activer animation class need to be relatively positioned here? 

conversely will the slider work if my div is fixed..?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 20, 2025 Mar 20, 2025

@REELHERO wrote:

 

I switched the animation from a fade to a slide up and its not working - Im guessing position is the culprit

 

https://pitchlab.net/lowdown/slidertest.html

 

the circle is in a fixed postion (i want it to stay at approx the bottom of the page where I set it) but I want it to slide up on page load (as the body text does) does the slider/activer animation class need to be relatively positioned here? 

conversely will the slider work if my div is fixed..?


 

 

Add to your css selector 'circle2':

 

animation: slideMeUp ease 700ms;

 

Then create another keyframe animation for slideMeUp:

 

@keyframes slideMeUp {
0% {
transform:translate(-50%, 200px);
}
100% {
transform:translate(-50%, 0px);
}
}
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 20, 2025 Mar 20, 2025

thank you - 

I wanted to add a delay but it loads then delays.. 

 

https://pitchlab.net/lowdown/index_delay.html

 

using 

 

animation: .7s slide-up cubic-bezier(.37,1.21,.58,1.1);
animation-delay: 1s;

 

is that not correct?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 20, 2025 Mar 20, 2025

 

 

quote

thank you - 

I wanted to add a delay but it loads then delays.. 

 

https://pitchlab.net/lowdown/index_delay.html

 

using 

 

animation: .7s slide-up cubic-bezier(.37,1.21,.58,1.1);
animation-delay: 1s;

 

is that not correct?


By @REELHERO

 


You have opacity: 1!important set on the .circle2 css selector............so it will show on page load..........set the opacity to 0 WITHOUT adding !important at the end otherwise that will overide the opacity that you have set on the slide_up keyframe animation.

 

Also you need to add 'forwards' to your .circle2 css animation , see below:

 

animation: .7s slide-up cubic-bezier(.37,1.21,.58,1.1) forwards;
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 20, 2025 Mar 20, 2025

shazam

https://pitchlab.net/lowdown/

 

thank you- sponging this in I promise..

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 20, 2025 Mar 20, 2025

Bookmark this:

 

CSS Tricks — Animation Properties Almanac

https://css-tricks.com/almanac/properties/a/animation/

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 20, 2025 Mar 20, 2025

thank you!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 20, 2025 Mar 20, 2025

This is my favourite go-to

CodePen Spark

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines