Jump to content
GreenSock

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

Search the Community

Showing results for tags 'trigger'.



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

  1. Hi, I'm looking for help regarding scroll trigger and items positioned fixed within a pinned section. I'm having an issue where I have a modal that needs to stay in window view once it's open, but it looks like it's being positioned relative to its pinned parent and I'm able to continue scrolling as normal. Hoping someone would be able to help me out!
  2. I am new to learn in GSAP , Can any one help me to solve this issue, I want to start my light when my fan start, Both need to be same scroll start and scroll end. Here is my code gsap.registerPlugin(ScrollTrigger); gsap.to("#fan", { scrollTrigger: { trigger: "#fan", toggleClass: 'active', scrub: true, start:"top 85%", //when top of fan passes 75% viewport height end:"bottom 45%", //when bottom of fan passes 25% viewport height toggleActions:"play pause reverse pause" }, perspectiveOrigin: "center 100vh", ease: "none" }); gsap.to(".lamp", { scrollTrigger: { trigger: ".lamp", endTrigger: ".footer", toggleClass: 'lampMove', scrub: 1, markers: true, start:"top top-=850", //when top of fan passes 75% viewport height end:"bottom top", //when bottom of fan passes 25% viewport height toggleActions:"play pause reverse pause" }, });
  3. GreenSock

    ScrollTrigger

    Scroll-driven animations re-invented Animate anything on scroll DOM, CSS, SVG, WebGL, Canvas, whatever. Toggle playback state or scrub through animations Entering or leaving a ScrollTrigger area can make an animation play, pause, resume, reverse, restart, or complete...or you can make the scrollbar can act like a scrubber! Pin elements in place Make an element appear immune to scroll changes while the ScrollTrigger is active. This is surprisingly useful for creating slick effects and keeping your animation in view during the scroll. Insane levels of flexibility ScrollTrigger is a control freak's dream when it comes to choreographing animations, but its rich callback system also lets you accomplish things totally unrelated to animation. Directionally smart ScrollTrigger supports vertical and horizontal scrolling, and lets you check if the last scroll movement was forward or backward, and even tracks velocity! Automatic resizing ScrollTrigger elegantly adjusts to viewport size changes. You can even use function-based start/end values to run custom logic or tap into fancy responsive CSS changes. Maximum performance ScrollTrigger uses all kinds of techniques to maximize performance like throttling updates, pre-calculating intersection points to minimize effort during scroll, leveraging transforms, layerizing elements to utilize the GPU, etc. Integrated with GSAP ScrollTrigger is built on GSAP, the battle-tested standard for JavaScript animation that's used on over 10,000,000 sites worldwide including most award-winning ones. Get started with ScrollTrigger Download Documentation Examples Featured ScrollTrigger demos View all demos
  4. This is a guest post from one of the best teachers of GSAP, Carl Schooff, also known as SnorklTV. If you're new to GSAP or just looking to learn about the GSAP 3 syntax, his video courses are second to none! I can't tell you how many hundred's of questions I've seen in the GreenSock forums about controlling GSAP animations on scroll. I'm so happy there is finally a genuine GreenSock tool to power the future of scroll-driven animations. Before I get into the specifics, it's worth a moment of time to honor those that got us here. A short history of Scroll-driven Animations John Polacek paved the way in 2013 with Superscrollorama, a jQuery plugin that used GSAP under the hood. Many amazing sites were created with this highly-acclaimed, ground-breaking, and trend-setting tool. In 2014 Jan Paepke took the reins and did a complete re-write and SuperScrollarama became ScrollMagic. ScrollMagic was hugely successful as it offered a slew of new features. Excellent demo files made the tool easy for beginners to understand. Awards sites exploded with many clever effects made with the ScrollMagic and GSAP combo. However, as with many solo-led open source projects, it's popularity created a hefty support burden that couldn't be managed. As issues went unanswered in the ScrollMagic repo, more users found their way to the GreenSock forums asking for support on a product GreenSock didn't create or have any way of fixing. ScrollTrigger is born On June 1st, 2020, GreenSock released ScrollTrigger to a sold out audience via a historic YouTube Premiere. ScrollTrigger was built with a totally fresh perspective on how GreenSock animations should be controlled via scroll. Not only does the API offer more features than it's predecessors, but it has a strong focus on performance which really shines in this "mobile-first" world. And as you can expect with any GreenSock product support is phenomenal. For a full list of features, you'll need to check out GreenSock's ScrollTrigger API Docs, but my job here is to get you up and running quickly... so let's go! Watch the Video This video is from my course GSAP 3 Express. I've got over 6 hours of training and loads of exclusive demos to help you master the GreenSock Animation Platform from the ground up at creativeCodingClub.com As always, I load my videos up with info so that I don't have to write a ton of stuff, but here are some key points. Get ScrollTrigger and GSAP ScrollTrigger is hosted on a CDN along with GSAP. Just use the script tags below to load it into your page. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script> Register ScrollTrigger It's recommended to register ScrollTrigger in your JavaScript to avoid tree-shaking with build tools. gsap.registerPlugin(ScrollTrigger); You can get recent CDN Urls from the GSAP Overview in the docs. For use with npm or more advanced build tools check out the GSAP installation videos. Super Basic Demo with a Single Tween The animation is super slow so that you can see how the animation reacts to entering and leaving the scroller-start and scroller-end positions. See the Pen ScrollTrigger QuickStart by Snorkl.tv (@snorkltv) on CodePen. Control a Timeline with ScrollTrigger See the Pen GreenSock ScrollTrigger Timeline by Snorkl.tv (@snorkltv) on CodePen. GreenSock's Toggle Action Demo In the video I explained how toggleActions work and how important they are. For each toggle event (onEnter, onLeave, onEnterBack, onLeaveBack) you can assign an action (play, pause, restart, reset, resume, complete, reverse, none). You'll assign a toggleAction via a 4-part string like "restart pause resume reverse". The best way to understand how they work is to play with the values in the demos above and study the demo below. See the Pen toggleActions - ScrollTrigger by GreenSock (@GreenSock) on CodePen. I'm hoping these resources help get you up and running quickly. For more inspiration check GreenSock's massive collection of ScrollTrigger Demos. What's next? I've only scratched the surface of what ScrollTrigger can do. I'll definitely be creating more training on this awesome tool. If you need help learning GSAP and want to take your skills to the next level check out my courses at CreativeCodingClub.com.
  5. Hi! I'm struggling with horizontal scroll implementation. The main goal is to change default vertical scrolling to horizontal and based on actual position, background opacity which is fixed and on center of my screen. In image below I tried to visualize it Based on codepen, I've created my implementation with gsap + scroll magic. Unfortunately I couldn't achieve smooth scrolling with it, so result isn't satisfied me. Here is a example of how smooth scrolling could looks like. https://codepen.io/Faelivrinx/pen/MWaOaVv I was trying use that code with scroll magic and implementation of horizontal scroll below, but there was a lot of weird artifacts via scrolling. I'd like to give up with scroll magic and use only gsap, but I could't figure out how to properly implement it. I need to track scrolling, where background image (fixed position) have to change opacity depends on visible section. There is any option using gsap to achive it? I'd be grateful for some examples
  6. I'm working on horizontal website and finally I've found some solution for smooth scrolling. I resigned for ScrollMagic, cause there was a lot of problems with simple smooth effects but now I don't know how to trigger my animation. I'd like to fade-in my section which entering and on leaving fade-out it. It should work for each section. Have you any suggestions or examples?
  7. With the demise of Adobe Edge, it looks like I am going to focus on using Google Web Designer as a central GUI animation tool. Having coded using GS in Flash for some time, I am glad that GSAP is easy to bring into GWD, especially since it is hosted on their CDN. I personally preferred Edge but never used GS in it, as I was able to make what I needed most of the time without it. My question is about how I could trigger GS functions/effects using events on GWD timeline. I've tried creating events and calling functions that have TweenLite calls in them, I've tried calling TweenLite directly in the event function and neither one works. If anyone has some guidance on this, it would be very welcome. Here's an example of the code generated for a timeline event that is currently not firing the tween at 2.1 seconds <script type="text/javascript" gwd-events="handlers"> window.gwd = window.gwd || {}; gwd.scaleCTA = function(event) { TweenMax.to(redCTA, 0.5, { scale: 1, ease: Back.easeOut.config(4) }); }; </script> I've tried also replacing this with the function call that currently works on rollover to bump the CTA up. Files are attached. Greensock GWD SVG Test.zip
  8. Hello, I'm a newbie, I'm working on a push menu, but it doesn't trigger menu item animation on the first click. I need some help Thank you!
  9. Guest

    ScrollMagic - TweenMax vs Timeline

    I'm new to both Greensock and ScrollMagic and I'm running up against a wall. I'm trying to understand how to tween/animate some aspects of my site ie., transitions between frames but still maintain some of the control by having items react when the user scrolls. Right now my project only reacts the scroll movement but I'd like to be able to trigger section to tween/animate as it gives a nicer/non choppy display. Any and all feedback/help would be greatly welcomed so that I can resolve this dilemma. Thank You
  10. Hi there! I'm a total newbie but already enjoying playing around with Greensock. I'm working on an accordion menu, and this is the behavior I'm going for: 1. User clicks on a menu item. 2. Menu item's panel is revealed. 3. A sequence of three animations is triggered within that one panel. 4. User clicks to collapse menu item and the whole thing is reset. Right now, the fader animation I have on animEvent is triggered on window load and subsequent user clicks change nothing. I'm thinking I need to use TimelineLite to start the animation when the specific menu item is clicked. But I'm very new to this and would appreciate someone pointing me in the right direction. Thanks! Hilary
  11. Hi, any help would be great right now. http://codepen.io/Ryan84/pen/aBBVWg?editors=1010 I don't want to fade on the numbers but instead run a timeline I have built for each number. these are included in the JS. They look like this: 1 http://codepen.io/Ryan84/pen/zooKZK?editors=1010 2 http://codepen.io/Ryan84/pen/JbbRXE 3 http://codepen.io/Ryan84/pen/xRREVR 4 http://codepen.io/Ryan84/pen/qqqaNr 5 http://codepen.io/Ryan84/pen/MbbjjW 6 http://codepen.io/Ryan84/pen/XNNjNd?editors=1010 At the moment when point 1 is clicked im saying fade on number one and hide all others. Ideally I want this to run when clicked:(instead of a fade on) var NUM1Timeline = new TimelineMax({paused: true}); NUM1Timeline.staggerFrom(".SET1>g", 0.8, { opacity:0,}, 0.18) .from(".top1", 2.4, {x: '-22%', y: '22%', opacity:1,},0.0) .from(".shd1", 6, { opacity:0,}, 0) .from(".blk10", 1, {transformOrigin:"50% 50%", scale:0, opacity:0, ease:Back.easeOut },2.2);TweenLite.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn}); Any help would be really appreciated. Kind regards, Ryan
  12. Hello. Been playing around with the ScrollMagic Tutorial but it's not giving me the results I want. Is there a simple method to trigger a GSAP animation sequence once the banner scrolls into the viewport?
  13. Hi, I'm new at JS and would appreciate if someone could take a look how can i start the animation auto on web page load? I tried to implement trigger at the end but it did not work. $(tTog).trigger("click"); I think this is the key part of code: $(tTog).on('click', function(e) { e.preventDefault(); $(this).toggleClass('inTo'); if ($(this).hasClass('inTo')) { fullIn.progress(0); fullIn.restart(); } else { fullIn.reverse(); } }); All code: var sun = $("#sun_3_"), cloud1 = $("#cloud1"), cloud2 = $("#cloud2"), cloud3 = $("#cloud3"), gauge = $("#gauge"), wheel = $("#wheel"), city = $(".city path"), tTog = $("#top-toggle"), sTog = $("#side-toggle"), bkFar = $("#bk-far"), bkMid = $("#bk-mid"), but1 = $("#button1"), but2 = $("#button2"), controls = $("#controls path"), mult = [controls, bkFar, bkMid, city, extras], body = $("body"), extras = $(".extras path"); TweenMax.set(wheel, { transformOrigin: "50% 50%" }); TweenMax.set(city, { visibility: "visible" }); //animation that's repeated for all of the sections function revolve() { var tl = new TimelineMax({ repeat1: -1 }); tl.add("begin"); tl.to(sun, 15, { transformOrigin: "50% 50%", rotation: 360, repeat: -1, ease: Linear.easeNone }, "begin"); tl.to(cloud1, 10, { x: -110, repeat: -1, yoyo: true, ease: Linear.easeNone }, "begin"); tl.to(cloud2, 10, { x: -70, repeat: -1, yoyo: true, ease: Linear.easeNone }, "begin"); tl.to(cloud3, 10, { x: -50, repeat: -1, yoyo: true, ease: Linear.easeNone }, "begin"); return tl; } var repeat = revolve(); //bring it in function cityIn() { var tl = new TimelineMax({ paused: true }); tl.add("in"); tl.from(tTog, 3, { rotation: -30, transformOrigin: "50% 100%", ease: Circ.easeInOut }, "in"); tl.staggerFrom(city, 0.75, { y: -50, scale: 0, cycle:{ x:[300, 100, 200], opacity:[0.5, 0.3, 0.2, 0.8], rotation:[50, 100, 150], }, transformOrigin: "50% 50%", ease: Back.easeOut }, 0.02, "in"); tl.staggerFrom(extras, 2.5, { x: 300, scale: 0, transformOrigin: "50% 50%", rotation: -30, ease: Elastic.easeOut }, 0.1, "in"); tl.from(bkFar, 2.5, { scaleY: 0, opacity: 0.7, transformOrigin: "50% 100%", ease: Circ.easeOut }, "in"); tl.from(bkMid, 2.5, { scaleY: 0, opacity: 0.7, transformOrigin: "50% 100%", ease: Circ.easeOut }, "in+=1"); tl.from(gauge, 2, { rotation: 180, transformOrigin: "50% 50%", ease: Bounce.easeInOut }, "in"); tl.from(gauge, 1, { rotation: 0, transformOrigin: "50% 50%", ease: Sine.easeIn }, "in+=3"); return tl; } var fullIn = cityIn(); //side toggle perspective function perspective() { var tl = new TimelineMax({ paused: true }); tl.add("per"); tl.from(sTog, 1, { rotation: -30, transformOrigin: "100% 50%", ease: Circ.easeInOut }, "per"); tl.to(bkFar, 1, { y: -30, scaleY: 0.8, opacity: 0.4, transformOrigin: "50% 100%", ease: Circ.easeInOut }, "per"); tl.to(bkMid, 1, { scaleY: 1.6, transformOrigin: "50% 100%", ease: Circ.easeInOut }, "per"); tl.from(gauge, 0.5, { rotation: 60, transformOrigin: "50% 50%", ease: Bounce.easeInOut }, "per"); tl.from(gauge, 1, { rotation: 0, transformOrigin: "50% 50%", ease: Sine.easeIn }, "per+=0.5"); return tl; } var side = perspective(); //button hue function hued() { var ch1 = "hsl(+=110%, +=0%, +=0%)", tl = new TimelineMax({ paused: true }); tl.add("hu"); tl.to(mult, 1.25, { fill: ch1 }, "hu"); tl.from(gauge, 2, { rotation: "-=70", transformOrigin: "50% 50%", ease: Bounce.easeOut }, "hu"); tl.to(body, 1.25, { backgroundColor: ch1 }, "hu"); return tl; } var hue = hued(); //button saturation function saturation() { var ch2 = "hsl(+=5%, +=2%, -=10%)", tl = new TimelineMax({ paused: true }); tl.add("sated"); tl.to(body, 1, { backgroundColor:ch2 }, "sated"); tl.from(gauge, 2, { rotation: "-=100", transformOrigin: "50% 50%", ease: Bounce.easeOut }, "sated"); tl.to(mult, 2, { fill:ch2 }, "sated"); return tl; } var sat = saturation(); $(document).ready(function() { Draggable.create(wheel, { type: "rotation", bounds: { minRotation: 0, maxRotation: 360 }, onDrag: function() { fullIn.progress((this.rotation)/360 ); fullIn.pause(); } }); $(tTog).on('click', function(e) { e.preventDefault(); $(this).toggleClass('inTo'); if ($(this).hasClass('inTo')) { fullIn.progress(0); fullIn.restart(); } else { fullIn.reverse(); } }); $(sTog).on('click', function(e) { e.preventDefault(); $(this).toggleClass('s-pers'); if ($(this).hasClass('s-pers')) { side.restart(); } else { side.reverse(); } }); $(but1).on('click', function(e) { e.preventDefault(); $(this).toggleClass('a-s'); if ($(this).hasClass('a-s')) { sat.restart(); } else { sat.reverse(); } }); $(but2).on('click', function(e) { e.preventDefault(); $(this).toggleClass('a-h'); if ($(this).hasClass('a-h')) { hue.restart(); } else { hue.reverse(); } }); });
  14. I'm trying to customize my Mailchimp validation Upon successful form validation, a 'thank you/almost finished' overlay is revealed with .show(), but i wanted to animate how it appears with GSAP. How can I call/trigger a GSAP animation from this mc-validate.js ? if (resp.result == "success"){ $('#mce-'+resp.result+'-response').show(); $('#mce-'+resp.result+'-response').css({"width": "80%", "padding": "3% 5%"}); $('#mc-embedded-subscribe-form').each(function(){ this.reset(); }); }); Thanks so much.
  15. i can set up a trigger area and get it to work, but if there are more than one draggable elements on a page then moving one item using the trigger area move both items together, things i have tried that have not worked trigger area as class (div header) only having one div having a trigger property setting two unique ids for trigger areas loading the div separately any ideas of what else I could try???
  16. Just finished making these two short codepens to demonstrate. This Draggable has a separate drag handle for the drag item, and on release it scales the entire drag item up. If you click on the handle while it's scaled up, I want the item to shrink back to it's normal size only while you are dragging. However, I can't figure out how to make it stay under your mouse where you actually clicked the handle. codepen 1 - instantly scale-down: http://codepen.io/anon/pen/VerJdJ codepen 2 - animate scale-down (this is what i would prefer if possible): http://codepen.io/anon/pen/JGOQYZ I thought maybe while scaling, if I could change the transform origin to where the mouse pointer is that would fix it, but unfortunately there are other coordinates in the application that rely on the transformOrigin being 50%, 50%. Is there a way to do this? Outcome: 1.) The item shrinks but is no longer under your mouse pointer. Even attempting to relocate it manually seems wonky (see codepen and other things I have tried below) Expected Outcome: 1.) the item shrinks and remains attached at the same offset to the mouse (appearing to scale at your mouse point, as if your mouse point were the origin) Things I have tried: 1.) in the onDragPress, I attempted to get the the mouse coordinates within the drag target's container and instantly relocate the item to those coordinates. That results in bazaar behavior. 2.) I've attempted calling myDraggable.update() before and during setting the scalethe scale animation, and onDragMove Any help is appreciated, thanks a lot in advance! Also, let me say: TimelineLite and TweenLite are some of the most incredible libraries I've used. Pushing my company to purchase a member license.
  17. I have some draggable items that are overlaying. When I press on one of them it gets to the top because of the zIndexBoost. This is great. But I was wondering how I can only let a specific (item 3 from 11) to be on top by clicking a button outside the draggable space. Is this possible?
  18. I have multiple elements that are being used as the trigger under one class. For example, the "dragHandle" class is my trigger: <div class="dragHandle"></div> <div class="dragHandle"></div> <div class="dragHandle"></div> <div id="draggableLayer"></div> This is fine when it is first initialized. All three will drag the "draggableLayer." The problem is, I am dynamically adding more "dragHandle" elements, and they are not seen as triggers after Draggable has initialized on page load. I.e: <div class="dragHandle"></div> <div class="dragHandle"></div> <div class="dragHandle"></div> <!-- these 2 were added after page load, but don't work like the others do as a trigger --> <div class="dragHandle"></div> <div class="dragHandle"></div> <div id="draggableLayer"></div> I have tried disabling (and killing) and then enabling the Draggable after adding the the additional trigger elements, but that hasn't worked. Is there a way to destroy and reinitialize the Draggable? Or maybe another way to make it see the additional trigger elements I am dynamically adding? Thanks!
  19. Sorry Im a new user of greensock . I want to achieve a 100% screenHeight scroll whenever user scroll until the trigger : ================================================================================ var tween7b = TweenMax.fromTo('#red2', 1, {y: "100%"}, {y: "0%", backgroundColor:'#C74A00', ease: Linear.easeNone}); var tween7c = TweenMax.to('#red2', 1, {y: "-100%", backgroundColor:'#C74A00', ease: Linear.easeNone}); new ScrollMagic.Scene({triggerElement: "#trigger6e", triggerHook: 0.85}) .setTween(tween7b) .addTo(controller); new ScrollMagic.Scene({triggerElement: "#trigger6e", triggerHook: 0.45}) .setTween(tween7c) .addTo(controller) .addIndicators(); ================================================================================== Sometimes its work, but sometimes it failed. I guess its getting confused because of two TweenMax.fromTo affected the same ID ? how could I achieve what I want then? thankyou before
  20. apo

    Draggable trigger issue

    Hi guys, I am working on a drag and sort thing with draggable and i have an issue that i can't find a way around it. Actually it looks like a bug. Items are in an unordered list so they are all identical in terms of child elements and class names. Draggable seems to work find with a class selector. Here's a code pen with just a simple setup. There is no drag trigger. http://codepen.io/ap-o/full/CEHBo But, once i pass a trigger selector everything goes wrong. Try to drag the little black box. http://codepen.io/ap-o/full/qfKtm Thanks in advance for your time *Apo
  21. Hi all! Today I was trying to execute some instructions on manual scroll event, avoiding the scroll animation performed by TweenMax. I attempted to initialize a boolean variable, which is false during the TweenMax animation and is restored to true "onComplete". On $(window).on("scroll") I checked the status of the variable. I found out that a scroll even was triggered even when my status variable was already returned to true: after some tests, it turns out that it's TweenMax itself. I tried on an empty page, reporting the following code in Firebug console, and looks like after the "hi" reported by TweenMax onComplete, another scroll event is triggered. $(window).on("scroll", function(){console.log ("scroll");}); TweenMax.to(window, 1, { scrollTo: { y: 500 }, ease: Linear.easeNone, onComplete: function () { console.log("hi!"); } }); I wouldn't expect this behavior: why does this happen? Thanks in advance! Massi
×