Search the Community

Showing results for tags 'this'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Categories

  • HTML5 / JS
    • Public
    • "Simply Green" Package
    • "Shockingly Green" Package
    • "Business Green" Package
  • Flash
    • AS3
    • AS2

Found 4 results

  1. Tweening $(this):after

    How can I tween a specific pseudo-element on hover?
  2. refer to $(this) in a timeline

    Hi there, I am integrating GSAP with fullpageJS. for some slides, i am using the same timeline for the elements to fade in when a user gets on a new slide. This is how i set my animation var workTitle = $(".title"); var workContent = $("p"); var content = [workTitle, workContent]; var tl2 = new TimelineLite({}); tl2.staggerTo( content, 0.2, { autoAlpha: 1, opacity: 1, ease: Power1.easeIn },0.2); for now the animation will run for all slides when the user gets to a slide. for example if the user gets on slide 1, the content fades in. but when I swipe to slide 2, the content is already in view because the animation was played for all slides. this is how all my slides (will) look like. <div id="slide2" class="slide"> <section class="content"> <h3 class="title">slide 2</h3> <p> content </p> </section> </div> I am using the callbacks provided by FullpageJS in combination with GSAP. I know $(this) refers to the specific element you want to target, but I can't seems to find a way to refer to $(this) in a timeline. Its working fine except the animation is triggered for all slides, which needs to be only for the loaded slide. see how i make use of the callback provided by fullpage with some gsap. afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) { var workTitle = $(".title"); var workContent = $("p"); var content = [workTitle, workContent]; var loadedSlide = $(this); var tl2 = new TimelineLite({}); tl2.staggerTo( content, 0.2, { autoAlpha: 1, opacity: 1, ease: Power1.easeIn }, 0.2 ); if (index == 2 && slideIndex == 1) { tl2.play(); } if (index == 2 && slideIndex == 2) { tl2.play(); } } Can someone help me and put me on the right track please see my fiddle: https://jsfiddle.net/jqk753m7/5/
  3. Passing $(this) into a Timeline

    Hello, Is it possible to pass $(this) into a timeline so that I can access $(this) as well as the data attributes of an object? In the example pen I'd like to pass data attribute values from buttons into the timeline, ultimately to fade between two images - only after they have each fully loaded. Thanks.
  4. Hi, I'm fairly new to GSAP, but I'm really enjoying experimenting with it. A hurdle I have come up against is how to hover over a specific div, and have an animation play based on which div is hovered over. I do not want to have to write the animation for each div. I know the way to do this is to use the jQuery selector 'this', but I can't get it to work for a timeline. I can get it to work using TweenMax.to('') etc, but I want to be able to use play() and reverse(), and so need it to work with a timeline. Rather than me babbling on, it's probably best to just check the codepen. Thanks for reading, and I hope you can help!