Jump to content
Search Community

catchtwnenty2

Members
  • Posts

    3
  • Joined

  • Last visited

Recent Profile Visitors

693 profile views

catchtwnenty2's Achievements

0

Reputation

  1. thnk you - I got it working //// please refactor me function escHover() { var fadeIn = $('.filter-fade-img'); var hoverBtn = $('.filter-hover'); TweenLite.set(fadeIn, { opacity: 0, y: '50px', ease: Back.easeOut }) hoverBtn.on('mouseenter', function(e) { var fadeIn = $(this).attr('data-filter'); var fadeIn = $('#' + fadeIn).find('.filter-fade-img'); console.log(fadeIn); TweenMax.to('.js-filter-esc-dormant', 0.1, { y: '0', opacity: 0 }, 0.1, "+=0.1"); TweenMax.staggerTo(fadeIn, 0.5, { y: '0', opacity: 1 }, 0.2, "+=0.1"); }); hoverBtn.on('mouseleave', function(e) { var fadeIn = $(this).attr('data-filter'); var fadeIn = $('#' + fadeIn).find('.filter-fade-img'); console.log(fadeIn); TweenMax.staggerTo(fadeIn, 0.5, { y: '50px', opacity: 0 }, 0.1, "+=0.1"); TweenMax.to('.js-filter-esc-dormant', 2, { y: '0', opacity: 1 }, 8, "+=8"); }); }
  2. I am using gsap to play a little animation. It is the same animation for different hovers. I am trying to tie the animation so that it runs on a specific hover only. So when I hover over data-filter="one" the animation only runs on li id-one" You need to scroll down the codepen to see what I am getting at Many thanks to all help - greatly appreciated
×
×
  • Create New...