Streaming live at 10am (PST)

Interaction possible with Webflow interactions?

Hey there,

is this possible with webflow interactions? Any hints how?

https://codepen.io/djap96/pen/EPQZvb?&page=7

Thanks a lot!

Best,
Jens


Here is my public share link: LINK
(how to access public share link)

Yup

1 Like

@avivtech Thanks, this is great! Can I also achieve the same effect, but using this “ping”?

https://codepen.io/tyberiu88/pen/cFGtz

Also I’ve tried to recreate this but I get some weird flickering, any chance you can have a look at it? Probably made a mistake here. Thanks a lot!

https://preview.webflow.com/preview/circle-2c4fe7?utm_medium=preview_link&utm_source=dashboard&utm_content=circle-2c4fe7&preview=218a66783da4fad761024d4f6b700c4c&mode=preview

@jensvahle my pleasure :smiley:

Yes, you can do this in Webflow. You will need to copy the CSS to a custom code widget/page and recreate the HTML elements in the desired location.

The flickering is caused by the mixing of 2 animations. You have an interaction and CSS animation on the same element. Choose one :wink:

1 Like

Haha ok I get it now. Thanks for the hint! :slight_smile:

Wait, actually I removed the webflow interaction and just used the css code and i still have the flickering. Any chance you could have another look?

Sure, but you’ll have to share the published url with me

https://circle-2c4fe7.webflow.io/

Ok, couple of problems in the animation:

  1. There are 2 points one right after the other (40% and 41%) which changes scale and opacity in an instant - that makes some kind of a flickering effect.

  2. The start and ending points are both with .25 opacity, which makes the circles visible while moving from the end point back to the starting point. This also makes the animation kind of jittery.

Got it to work! Check this: https://circle-2c4fe7.webflow.io/

:smiley: Thanks man! Have a nice sunday!

1 Like
1 Like

@avivtech Do you know how I can adjust the sizes of the circles in the custom code section but just for mobile? I’ve created the animation in the page code section:

`.contentcircle {
position: relative;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
background-color: transparent;
}

.circle1 {
width: 50px;
height: 50px;
background-color: transparent;
position: absolute;
left: 50%;
margin-left: -25px;
top: 50%;
margin-top: -25px;
border-radius: 50%;
border: 2px solid #20bdd5;
animation: radar 4s infinite;
-webkit-animation: radar 4s infinite;
-webkit-transition: all ease-in-out;
transition: all ease-in;
animation-delay: 4.7s;
}
.circle2 {
width: 50px;
height: 50px;
background-color: transparent;
position: absolute;
left: 50%;
margin-left: -25px;
top: 50%;
margin-top: -25px;
border-radius: 50%;
border: 2px solid #20bdd5;
animation: radar 4s infinite;
-webkit-animation: radar 4s infinite;
-webkit-transition: all ease-in-out;
transition: all ease-in;
animation-delay: 5.7s;
}

.circle3 {
width: 50px;
height: 50px;
background-color: transparent;
position: absolute;
left: 50%;
margin-left: -25px;
top: 50%;
margin-top: -25px;
border-radius: 50%;
border: 2px solid #20bdd5;
animation: radar 4s infinite;
-webkit-animation: radar 4s infinite;
-webkit-transition: all ease-in-out;
transition: all ease-in;
animation-delay: 6.7s;
}

.circle4 {
width: 50px;
height: 50px;
background-color: transparent;
position: absolute;
left: 50%;
margin-left: -25px;
top: 50%;
margin-top: -25px;
border-radius: 50%;
border: 2px solid #20bdd5;
animation: radar 4s infinite;
-webkit-animation: radar 4s infinite;
-webkit-transition: all ease-in-out;
transition: all ease-in;
animation-delay: 7.7s;
}

@keyframes radar {
1% {
width: 51px;
height: 51px;
margin-left: -25.5px;
margin-top: -25.5px;
border-color: #20bdd5;
}
100% {
width: 657px;
height: 657px;
margin-left: -328.5px;
margin-top: -328.5px;
border-color: #fff;
}
}

@-webkit-keyframes radar {
1% {
width: 51px;
height: 51px;
margin-left: -25.5px;
margin-top: -25.5px;
border-color: #20bdd5;
}
100% {
width: 657px;
height: 657px;
margin-left: -328.5px;
margin-top: -328.5px;
border-color: #fff;
}
}`

Yes, you need to use media query.
for example:

@media (max-width: 991px) {
only changed values
}

btw
When most of properties of few different classes are the same, it is easier to write, and easier on the client side to combine them into 1 class or write the CSS more efficient like so:

.circle1, .circle2, .circle3, .circle4 {
all similar properties
}
.circle1 {additional specific properties}
.circle2 {additional specific properties}
.circle3 {additional specific properties}
.circle4 {additional specific properties}
1 Like