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 5 results

  1. Using staggerTo / staggerFrom with "this"

    Hi all, This is something that I've been wondering about, but haven't worked out the best solution for. What I'm trying to do is animate an array of elements on the x axis by the width of each element. For example: element1 = 20px element2 = 40px Using staggerTo / staggerFrom, I'm looking to animate element1 by 20px and element 2 by 40px. I've attached a codepen to what I was hoping would work. Is it possible to do these kinds of animations using the "this" keyword?
  2. Tweening $(this):after

    How can I tween a specific pseudo-element on hover?
  3. 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/
  4. 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.
  5. 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!