Card Carousel Angularjs

Issue I am trying to implement this animation Jargon.html <ion-view title=”Jargon”> <ion-content> <a class=”item” href=”#/jargon”></a> <div class=”container”> <div data-card=”4″ class=”card”><span>Click Me</span></div> <div data-card=”3″ class=”card”><span>Click Me</span></div> <div data-card=”2″ class=”card”><span>Click Me</span></div> <div data-card=”1″ class=”card”><span>Click Me</span></div> <div data-card=”0″ class=”card”><span>Click Me</span></div> </div> </ion-content> The

Continue reading

Animate Between Classes Angular 2

Issue Is there an Angular 2 way to animate between classes? <div class=”home-carousel-head” id=”full-screen-carousel” [ngClass]=”{tab_one: tab_one, tab_two: tab_two, tab_three: tab_three}”> I want to fade out or fade in when the class changes between each tab, this was easy with Angular

Continue reading

Any links Im missing – HTML/CSS

Issue I have the code: var score = 0; $(‘button’).click(function() { $(‘#shot’).addClass(‘shot-animation’); $(‘#shot’).one(‘animationend’, function() { if (collision($(‘#shot’), $(‘#bar’))) { var audio = document.getElementById(“collision-sound”); audio.play(); $(‘#bar’).addClass(‘bar-flash’); $(‘#bar’).one(‘animationend’, function(e) { if (e.originalEvent.animationName === ‘flash’) { $(‘#bar’).removeClass(‘bar-flash’); } }); ++score; $(‘#score’).text(score); if (score

Continue reading

Styled Components cannot set :hover properties

Issue export const WatchVideoButtonWrapper = styled.div` position: absolute; bottom: 80px; right: 33px; background-color: ${(props) => props.bgColor}; color: ${(props) => props.color}; border-radius: 100px; transition: all 0.1s; cursor: pointer; fill: ${(props) => props.color}; &:hover { background-color: ${(props) => props.hoverBgColor}; color: ${(props) =>

Continue reading

Animation in CSS/JS

Issue What links would I need to have this animation work properly on any other IDE’s? Does anyone know? The animation works fine here: https://codepen.io/ksu/pen/VwZQmGR new WOW().init(); /* AUTHOR LINK */ $(‘.about-me-img img, .authorWindowWrapper’).hover(function() { $(‘.authorWindowWrapper’).stop().fadeIn(‘fast’).find(‘p’).addClass(‘trans’); }, function() { //$(‘.authorWindowWrapper’).stop().css(‘display’,

Continue reading

Removing footer in HTML/CSS

Issue I have this code: new WOW().init(); /* AUTHOR LINK */ $(‘.about-me-img img, .authorWindowWrapper’).hover(function() { $(‘.authorWindowWrapper’).stop().fadeIn(‘fast’).find(‘p’).addClass(‘trans’); }, function() { //$(‘.authorWindowWrapper’).stop().css(‘display’, ‘none’).find(‘p’).removeClass(‘trans’); }); body { font-family: Open Sans, “Helvetica Neue”, “Helvetica”, Helvetica, Arial, sans-serif; font-size: 13px; background-color: #000000 !important; background-size: cover;

Continue reading

Start & Stop lottie player/animation with buttons

Issue Very basic stuff, but im still struggling with javascript. I have this lottie animation, which is not svg. <script src=”https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js”></script> <lottie-player src=”https://assets2.lottiefiles.com/packages/lf20_6gduajmo.json” background=”transparent” speed=”1″ style=”width: 300px; height: 300px;” controls></lottie-player> <button id=”start”>START</button> <button id=”stop”>STOP</button> My goal is to have a

Continue reading

How to rotate svg circle in place?

Issue I’m trying to make this icon rotate like this: https://www.youtube.com/watch?v=Y61pjmWLSn8 At the moment the icon is moving all over the place. How can i make the icon rotate like the video? path { transform-origin: 50px 50px; animation-duration: 3s; animation-name:

Continue reading

Animating Linear Gradient

Issue I need some help smoothing my animation, I’ve tried doing it according to a similar question here, on StackOverflow, but it doesn’t seem to work. It just roughly changes the gradients. The goal is to animate it like the

Continue reading

advanced hover button

Issue I have no idea how to do this effect. Solution Here we have a simple example about how to do it <style> p{ display: block; position: relative; width: 136px; } .circle{ position: absolute; height: 5px; width: 5px; background: #00ff00;

Continue reading

CSS animation delay in between loop

Issue Trying to get a label with class price to slide up, then slide back down with CSS. I have the following — -webkit-animation-name: slidingPrice; -webkit-animation-duration: 300ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-delay: 4s; @-webkit-keyframes slidingPrice { 0% { opacity: 0;

Continue reading

CSS animation delay in between loop

Issue Trying to get a label with class price to slide up, then slide back down with CSS. I have the following — -webkit-animation-name: slidingPrice; -webkit-animation-duration: 300ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-delay: 4s; @-webkit-keyframes slidingPrice { 0% { opacity: 0;

Continue reading

SVG Stripe Animation with curved shapes

Issue I am trying to animate this svg to have the ‘barbershop’ stripe animation. This is what I currently have: <svg width=”300″ height=”300″ viewBox=”0 0 120 120″> <pattern id=”diagonalHatch” width=”30″ height=”10″ patternTransform=”rotate(30)” patternUnits=”userSpaceOnUse”> <animate attributeName=”x” from=”0%” to=”100%” dur=”5s” repeatCount=”indefinite”/> <rect

Continue reading

SVG Stripe Animation with curved shapes

Issue I am trying to animate this svg to have the ‘barbershop’ stripe animation. This is what I currently have: <svg width=”300″ height=”300″ viewBox=”0 0 120 120″> <pattern id=”diagonalHatch” width=”30″ height=”10″ patternTransform=”rotate(30)” patternUnits=”userSpaceOnUse”> <animate attributeName=”x” from=”0%” to=”100%” dur=”5s” repeatCount=”indefinite”/> <rect

Continue reading

How to run animation on load CSS

Issue How do I start counter on load? I was able to make it start on hover but never get it to work on load. JS: var root = document.querySelector(‘:root’); var rootStyles = getComputedStyle(root); var start= rootStyles.getPropertyValue(‘–start’); var finish= rootStyles.getPropertyValue(‘–finish’);

Continue reading