Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'eventlistener'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 5 results

  1. Hello, can anyone help me with this error? (I want to preface that I'm a newbie at coding and I only try to adapt from other as much as I can understand...) I have adapted some code from the forum which explained how to use GSAP for different media queries but I cannot seem to make the functionality work... The idea: When page is fullscreen, the menu icon should trigger and animate GSAP timeline on >mouseenter/mouseleave< for selector ".menu-links". ( I used .play(); and .reverse(); ) When page is going devices size screens, mobile/tablet < 733px, the menu icon should trigger and animate GSAP timeline on >click< for selector ".menu-links + #social" ( I used .restart(); and .reverse(); ) ---- the code works right now only when page is loaded in mobile size to begin with, if resized functionality breaks. also vice versa, desktop resized to mobile ---- My question is can: this be done better? Ideal would be to resize page without losing functionality going from big screens to small screens without page reload. ==== ps: if this topic is wrongfully opened please feel free to delete it. Thank you very much, Alex
  2. Hey guys! I have been lurking the forum since last few days. I have found a lot of useful information thanks for the great support. I am looking to smoothen the animation in my codepen by doing following: - fasten the timescale of tweens when 'onmouseover' so the div stop quickly but gracefully - Also smothen the tweening overwrite happening while moving the cursor fast I think the best way would be to use a timeline to update timescale but I am having trouble to figuring that out. Thanks in advance
  3. Hi all, I am very new to hand coding and using GSAP and have just got the hang of the basic principles of the tweens and timelines. My problem is I would like to animate a half background during the timeline and after its completed add a mouseenter that animates the same background to the full height. The issue is if the mouse enters before it gets to the timeline it animates the background in, it breaks the mouseenter and does not behave as it should. To replicate check the codepen. Mouseenter before the black half background animates in and it will complete the whole mouseenter function. To see the desired result. Refresh the codepen and do not mouseenter until the black half background animates in. Then mouseenter. Is there a way I can a. add the mouseenter mouseleave functions after a certain point in a timeline? b. use a check else if statement to see if mouse has already entered and still has not left play the rest of the mouseenter animation ? Sorry this is my first post so hope this information and the pen makes sense. Thanks for any advice or help in advance, Chris
  4. tupic

    draggable on touch

    Dear Community I am new in webdevelopment. So I started my first cordova project. In the codepen-example you can see my code. It works well on desktop browsers. But when I test my code on an mobilephone the img #main-menue-knob can't get dragged. Is there any eventlistener that I have to add, that the drag-function works on a touchevent? Thanks for support Tupic
  5. Hi all - this is my first post on GSAP, hope you guys can help me. Love GSAP by the way, it is awesome. I'm using Reveal EventListeners (https://github.com/hakimel/reveal.js#slide-states) to trigger timeline sequences. These sequences are a combination of staggerFrom and from, and I use DrawSVG with Yoyo sometimes too. I found this example that pretty much matches my setup: http://stackoverflow.com/questions/23936987/how-to-trigger-a-gsap-function-when-a-slide-comes-active-with-reveal-js Here is one of the sequences, they all follow the same structure: Reveal.addEventListener('slideName', function () { tl = new TimelineMax(); tl.staggerFrom("#aSlideElement", 9, { rotationY: 1080, scale: 15, y:"-1900px", x:"600px", ease: Power4.easeInOutQuint }, 0.7) .from("#anotherSlideElement", 9, { onUpdate: cssFilterTween, onUpdateParams: ["{self}", "blur", 100, 1], ease: Power4.easeInOutQuint }, 0) .from("#yetAnotherSlideElement", 10, { fill:"#0f0c31", ease: Power4.easeInOutQuint }, 5) .from("#soManySlideElements", 4, { autoAlpha: 0, ease: Power4.easeInOutQuint }, 10) }, false); Reveal is basically a presentation slides framework and each slide has its own sequence that is triggered using an eventlistener. My problem is these sequences do not completely reset the timeline and all the elements when you 'leave' a slide. This means if you go back and forth between slides, the elements are sometimes misplaced, finish in the wrong position or get muddled start/finish timings. Eventually they just slow to a halt and do nothing. I have to refresh the page to get it back to where things started. I've tried restart(), clear(), remove(), kill(), pause(0), etc. I've tried placing 'overwrite: 3' amongst each tween. I've tried placing a single global timeline above the eventlisteners, rather than create a new timeline for each slide. I think it may be something to do with the volatile triggering that occurs when quickly going back and forth between slides, but I assume GSAP should be pretty quick at resetting? Any help would be awesome, this is really puzzling me. Thanks, James
×