Jump to content
GreenSock

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

Search the Community

Showing results for tags 'scroller'.



More search options

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

  1. Hi i want to make exact animation for testimonial section from this website (https://appinventiv.com/) at the end you will find testimonial section Please provide complete step by step tutorial i was noob to GSAP please help me
  2. GreenSock

    GSAP 3.4 Released

    GSAP 3.4 has arrived with some significant improvements to ScrollTrigger like: Accommodating different setups for various screen sizes, like a mobile version and desktop version - ScrollTrigger.matchMedia() Batching and staggering elements that enter the viewport, similar to what's often done with IntersectionObserver - ScrollTrigger.batch() Integrating with smooth scrolling libraries - ScrollTrigger.scrollerProxy() ScrollTrigger.matchMedia() You can use standard media queries to seamlessly transition between different ScrollTriggers. It's surprisingly simple to set up and let ScrollTrigger automatically handle all of the creating, undoing, and destroying for you. Basic setup ScrollTrigger.matchMedia({ // desktop "(min-width: 800px)": function() { // setup animations and ScrollTriggers for screens 800px wide or greater (desktop) here... // These ScrollTriggers will be reverted/killed when the media query doesn't match anymore. }, // mobile "(max-width: 799px)": function() { // The ScrollTriggers created inside these functions are segregated and get // reverted/killed when the media query doesn't match anymore. }, // all "all": function() { // ScrollTriggers created here aren't associated with a particular media query, // so they persist. } }); See the Pen ScrollTrigger.matchMedia() Demo by GreenSock (@GreenSock) on CodePen. There's a new ScrollTrigger.saveStyles() method that can be useful with matchMedia(). It saves the current inline styles for any element(s) so that they're reverted properly if animations added other inline styles. It's explained in the video above. See the ScrollTrigger.matchMedia() docs for details. ScrollTrigger.batch() Normally, each ScrollTrigger fires its callbacks (onEnter, onLeave, etc.) immediately when they occur but what if you want to coordinate an animation (like with staggers) of ALL the elements that fired a similar callback around the same time? ScrollTrigger.batch() creates a coordinated group of ScrollTriggers (one for each target element) that batch their callbacks within a certain interval, delivering a neat Array so that you can easily do something like create a staggered animation of all the elements that enter the viewport around the same time. It's a great alternative to IntersectionObserver because it's more widely compatible and easier to work with. Plus you're not restricted to only entering or exiting the viewport - batch() can use ANY start and end values! Demo See the Pen ScrollTrigger.batch() Demo by GreenSock (@GreenSock) on CodePen. See the ScrollTrigger.batch() docs for details. ScrollTrigger.scrollerProxy() ScrollTrigger purposefully avoids "scrolljacking" (disabling the browser's native scrolling behavior in favor of a custom, non-standard scrolling solution). However, smooth scrolling was by far the most requested feature to pair with ScrollTrigger. There are plenty of smooth-scrolling libraries out there, so we created the .scrollerProxy() method to make it simple to integrate any of them with ScrollTrigger (or create your own effects). Here's a basic example using Locomotive Scroll but check out the .scrollerProxy() docs for examples with other libraries. See the Pen ScrollTrigger with LocomotiveScroll by GreenSock (@GreenSock) on CodePen. And more... GSAP 3.4 also delivers various bug fixes, so we'd highly recommend installing the latest version today. There are many ways to get GSAP - see the Installation page for all the options (download, NPM, zip, Github, etc.). Resources Full release notes on Github Full documentation Getting started with GSAP Learning resources Community forums ScrollTrigger Express video course from Snorkl.tv Happy tweening!
  3. Hi all. Complete newbie to GSAP here. i'm looking forward to getting to grips with it to add some animation to a site I'm currently redesigning. At the minute though there's one legacy script on the site, which relies on jQuery. It's just a wee utility script which will animate scrolling to any element on a page with an ID attribute set. [see the Codepen] I want to "translate" this to GSAP instead, as it seems daft loading jQuery as well as GSAP, just for this one feature. However my JavaScript Fu is a bit rusty and I'm not having much luck working out how to GSAP-ise my selector. The function is supposed to be triggered when a link is clicked with an href of `#someID` but not for an href of `#`. GSAP doesn't seem to like the `:not` selector... or my attempts to adapt the syntax are wrong. Here's the jQuery version: $(function() { $('a[href*="#"]:not([href="#"])').click(function() { // do stuff }); }); Could anyone give me a few hints?
  4. Hi, I have a small issue with my scroller withing my mobile app. The issue is if I'm pressing, holding and dragging (up or down to wanted position) in one action, and then lifting my finger - the scroll will continue the animation of scrolling. It's like it "stores acceleration" - If my drag action is bigger, than the scroll will continue the animation more. How can I disable this "after scroll" animation? I just want a smooth and linear scroll. Can someone help? Here is my current code: ThrowPropsPlugin.to(buttons_container_mc, {throwProps:{ y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:100} }, onUpdate:blitMask.update, ease:Expo.easeOut }, 100, 0.25, 0); Best regards, Roman
  5. I have a scrolling element (x axis) which I have applied draggable to. Everything is working fine when the page loads however when I append a new child element to it the scrolling element does not update its width which makes the element unscrollable. I have had a look at running update(), applyBounds() and even manually changing the padding right value but no bueno.
  6. jeff4gee

    GSJS Slider

    I need to create two elements and I am not sure where to start. First I need to create a slider that can control a TimelineLite animation. Second I need to create a custom scroller for a div box with its content being text. Any help on these two items will be greatly appreciated. Thanks for your help!
  7. Hi Everyone, I’m writing due to a “Scroll function” I’m having difficulties in implementing for an APP. I’ve developed an APP for ios and android in Flash professional cs6 with AIR 3.2 and everything works perfectly apart from the scroll function. I’ve used the ThrowPropsPlugin and the movement works fine however it doesn’t allow me to select what I want to select in the container. Instead when I take off my finger it selects that element I’ve stopped on. In the ThrowPropsPlugin I’ve applied the mouse_down and mouse_up events to make the vertical movement, and inside the container I have MovieClips associated with events of touch_tap. So when I take my finger off automatically the movieclip is activated. Does anyone have a solution to this problem? I feel like I’ve tried everything. Removed the event, added events, changed events, the pressure, resistence of the container, changed the properties of MouseChildren and nothing. If anyone has any advice on this problem I would be most grateful.
×