Jump to content

Search the Community

Showing results for tags 'state'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 6 results

  1. GreenSock

    Flip Plugin

    The Flip Plugin seamlessly animates between states dynamically with minimal code. The video explains more... VIDEO All you need to do is get the initial state using Flip.getState(targets), make whatever changes you'd like to the DOM or styling, and then call Flip.from(state). GSAP handles the rest! Of course like all GreenSock tools, there's a rich API for finessing things and getting exactly the look you want. "FLIP" is an animation technique that stands for "First", "Last", "Invert", "Play" and was coined by Paul Lewis. Here's a demo of how it works: See the Pen How GSAP's Flip Plugin Works by GreenSock ( @GreenSock) on CodePen. Feature highlights Nested transforms? No problem! Most FLIP libraries only calculate basic offsets assuming no transforms beyond x/y, so a scaled parent breaks things. Rotations certainly aren't allowed. GSAP's Flip plugin just works. Set absolute: true to make elements use position: absolute during the flip. This solves layout challenges with things like flexbox and grid. One flip can handle multiple elements and even stagger them. Resize via width/height properties (default) or scaleX/scaleY (scale: true) You get the full power of GSAP under the hood, so you can use any ease, define special properties like onComplete, onUpdate, repeat, yoyo, and even add() other animations with total control of timing, etc. Apply a CSS class during the flip with toggleClass. It'll be removed at the end of the flip. Flip.fit() repositions/resizes one element to fit perfectly on top another (or even a previous state of the same element). It's as easy as Flip.fit(".box1", ".box2"). Add tween properties to make it animate over time, likeFlip.fit(".box1", ".box2", {duration: 1, ease: "power2.inOut", absolute: true}). Compensate for nested offsets, like if a container element is getting flipped along with some of its children and you don't want the offsets to compound (nested: true) Smoothly handles interruptions. Flip one element to another and have them cross-fade (fade: true). For example, a thumbnail image flips to the full-resolution, full-screen image that's a different element completely, but the user just sees the thumbnail seamlessly transition into the full-screen one. Simply set the same data-flip-id attribute on both to match them up. onEnter and onLeave callbacks for when elements enter or leave (like if the flip senses a display: none toggle and there's no matching target to swap), making it easy to elegantly animate on/off elements. Simple example See the Pen FLIP swap element positions by GreenSock ( @GreenSock) on CodePen. Flex example See the Pen Flipping Flexbox by GreenSock ( @GreenSock) on CodePen. Advanced example See the Pen Grid item view with FLIP plugin by GreenSock ( @GreenSock) on CodePen. Learn and see more Want to learn more? the Flip docs are the best place to go. View the Flip showcase View all of the Flip how-to demos Get your hands on the FlipPlugin The FlipPlugin is a bonus plugin for Club GreenSock members ("Shockingly Green" and "Business Green" levels). It's our way of showing our gratitude to those who are fueling innovation at GreenSock. To download the FlipPlugin, just log into your account dashboard and grab the latest version of GSAP. Don't have Club GreenSock? Try the FlipPlugin for free on CodePen! There's a special but fully-functional version of the FlipPluginthat we link to in our demos in our FlipPlugin Collection on CodePen, so feel free to fork any of them and take the FlipPlugin for a spin. Note: the special version of the plugin will only work on the CodePen domain. To find out more about the many benefits of being a Club GreenSock member swing on by the club page and be sure to check out the other premium plugins.
  2. Hello everyone, since recently I started using React with GSAP. I have little experience in both, so the struggle is real. I am trying to create something very simple, a full screen menu that you can show/hide. When i am trying to debug this, i can see the state changing, and if I try to print within the `toggleMenu()`, method, i can see the state is changing however `timeline.play()`, simply doesn't do anything. I tried also removing the if case for play and reverse but still no effect. Its just atht my timeline doesnt want to play. I also tried using `componentDidUpdate()` but still no success. in that case my code looked like this: toggleMenu() { this.setState({ visible: !this.state.visible }); } componentDidUpdate(prevProps, prevState){ const {visible: preVisible} = prevState; const { visible } = this.state; if (visible && visible !== preVisible) { this.timeline.play(); } } componentDidMount(){ this.timeline = new TimelineLite({ paused: true }) .to(this.menuRef.current, 0.5, {autoAlpha: 1}); // .staggerTo(this.listNodes, 0.3, { opacity: 1,y: 0}, 0.2, "-=0.3"); } This is my container, where the magic is supposed to happen: import React, { Component } from "react"; import Hamburger from "./hamburger.jsx"; import Menu from "./menu.jsx"; import Logo from "./misc/Logo.jsx"; import { TweenMax, TimelineLite, CSSPlugin } from "gsap/all"; import { Transition } from "react-transition-group"; class MenuContainer extends Component { constructor(props) { super(props); this.state = { visible: false }; this.toggleMenu = this.toggleMenu.bind(this); this.timeline = null; this.menuRef = React.createRef(); } toggleMenu() { console.log(this.state.visible) this.state.visible ? this.timeline.reverse() : this.timeline.play(); this.setState({ visible: !this.state.visible }); } componentDidMount(){ this.timeline = new TimelineLite({ paused: true }) .to(this.menuRef.current, 0.5, {autoAlpha: 1}); // .staggerTo(this.listNodes, 0.3, { opacity: 1,y: 0}, 0.2, "-=0.3"); } render() { const { visible } = this.state; let logoColor = "#3e444e"; //blue if (visible) logoColor = "#ffffff"; //White return ( <div className="nav-wrapper"> <div className="top-bar"> <div className="top-bar-left"> <Logo logocolor={logoColor} /> </div> <div className="top-bar-right"> <div> <Hamburger handleMouseDown={this.toggleMenu} menuVisibility={visible} /> </div> </div> </div> <div> <Menu visible={visible} menuRef={this.menuRef} /> </div> </div> ); } } export default MenuContainer; This is the menu element where I am setting the `ref`: import React, { Component } from "react"; import { apiUrl } from './../../methods'; class Menu extends Component { constructor(props) { super(props); this.state = { links: [], isLoading: false, error: null }; } componentDidMount() { const targetUrl = apiUrl("/sapi/main_menu_items.json"); this.setState({ isLoading: true }); fetch(targetUrl) .then(response => { if (response.ok) { return response.json(); } else { throw new Error("Something went wrong...."); } }) .then(data => this.setState({ links: data.links, isLoading: false })) .catch(error => this.setState({ error, isLoading: false })); //Passing the data to state.links and changing isLoading to false } render() { const { links, isLoading, error } = this.state; const listItems = links.map((link, index) => ( <li className="menu-link v-link" key={link.slug} // ref={li => (this.listNodes[index] = li)} > <a href={link.slug}>{link.title}</a> </li> )); if (error) return <p>{error.message}</p>; if (isLoading) return <p>Loading....</p>; return ( <div className="full-screen-menu" ref={this.props.menuRef}> <div className="grid-y grid-frame align-middle"> <div className="cell auto links-wrapper"> <div className="grid-container full-height"> <div className="grid-x align-middle full-height"> <div className="cell small-12"> <ul className="links">{listItems}</ul> </div> </div> </div> </div> <div className="cell shrink"> <div className="grid-container"> <div className="grid-x"> <div className="cell small-12 text-right text-white"> <ul> <li> <a className="text-white">+31 638 501 270</a> </li> <li> <a className="text-white">hello@whale-agency.com</a> </li> </ul> </div> </div> </div> </div> </div> </div> ); } } export default Menu; And here is the hamburger, that is being clicked: import React, { Component } from "react"; import MenuOpener from "./misc/menuOpener.jsx"; import MenuCloser from "./misc/menuCloser.jsx"; class Hamburger extends Component { render() { if (!this.props.menuVisibility) { return ( <MenuOpener className="menu-button" onMouseDown={this.props.handleMouseDown} /> ); } else { return ( <MenuCloser className="menu-button" onMouseDown={this.props.handleMouseDown} /> ); } } } export default Hamburger; Last but not least, the important css: .full-screen-menu { position: absolute; opacity: 0; visibility: hidden; width: 100vw; height: 100vh; bottom: 0; left: 0; background: url(/images/menu-background.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 999; } Hopefully someone can help me go in the right direction. Greetings, Nikolay
  3. Hi GSAP enthusiasts, I am searching for the best way to propagate state changes on timeline level (e.g. "timeline was paused", "timeline started playing again"). There are event callbacks: "onComplete", "onUpdate", "onStart", "onReverseComplete" or "onRepeat". But none of them is working for me... I am looking for something like "onStateChange" that I can listen for, to properly propagate state changes. e.g. tl..eventCallback('onStateChange', function(evt) { if (tl.paused()) { /*...*/ } else { /*...*/ } }) Is there any recommended way to achieve this? Any hint appreciated. Happy animating!
  4. The animation module for Angular 1 was a game changer, and has since been copied by other libraries like Vue and React. For Angular 2, they decided to take a different approach, and create their animation engine. At one point in time, they were looking at using GSAP, but went with using a declarative syntax with the Web Animations API instead. The end result has been pretty craptastic. Nobody uses it, not even the Angular Material team. So how do you animate state changes like this without using their engine? transition('inactive => active', animate('100ms ease-in')), transition('active => inactive', animate('100ms ease-out')) I didn't know if that was possible using GSAP, but @apploud shared a script with me the other day that can do something similar, allowing you to create animations like this. "fadeIn => fadeOut": () => TweenLite.to(this.element.nativeElement, 0.5, { autoAlpha: 0 }), "fadeOut => fadeIn": () => TweenLite.to(this.element.nativeElement, 0.5, { autoAlpha: 1 }) It's just a very basic implementation right now, and needs some work, but it could be really helpful for Angular users who want to use GSAP. I don't have time to work on it, but it would be awesome if somebody else could work on it, and maybe make it into an NPM module. Like I said, it's pretty basic right now, so it's not going to work with wildcard or void states like this. // enter transition "void => *" : () => TweenLite.from(this.element.nativeElement, 1, { autoAlpha: 0 }) // leave transition "* => void" : () => TweenLite.to(this.element.nativeElement, 0, { autoAlpha: 0 }) You can see how it works in this demo. https://www.webpackbin.com/bins/-KlC3WIhC60G0V7Ck5CN
  5. Hey guys Sorry for no codepen demo as I'm working on a large website and couldn't just extract the bits for the sake of a demo. Hopefully the screenshots + gifs will suffice. Scenario: I have a pinned section that sequentially shows + hides 2 elements as you scroll. When you scroll to the element initially, they should be hidden and then fade in and out again until the element is unpinned. Problem: Both elements are initially visible and overlapping each other when the page first loads. If i scroll down the page and run through the animation, and then scroll back up again, the animation ONLY THEN works correctly. So it's as if the final state of the animation is setting it correctly, but I can't seem to set it up to do that from the get go. Some Gifs: The problem: http://i.imgur.com/QVPga7u.mp4 How it should be: http://i.imgur.com/0zKVUo8.mp4 (note this happens once I've scrolled down and then back to the top again) The Javascript TweenMax.set(".infographic-text-wrapper", { opacity: 0, scale: .9 }); // this has no effect var controller = new ScrollMagic.Controller(); // tween var tween = new TimelineMax() .fromTo('.infographic-text-wrapper-1', 1, { opacity: 0, scale: .9 }, { opacity: 1, scale: 1 }) .fromTo('.infographic-text-wrapper-1', 1, { opacity: 1, scale: 1 }, { opacity: 0, scale: .9 }) .fromTo('.infographic-text-wrapper-2', 1, { opacity: 0, scale: .9 }, { opacity: 1, scale: 1 }) .fromTo('.infographic-text-wrapper-2', 1, { opacity: 1, scale: 1 }, { opacity: 0, scale: .9 }) // scene var scene = new ScrollMagic.Scene({ triggerElement: "#what-we-offer", triggerHook: 'onLeave', triggerOffset: 800, duration: 3000, offset: -150 }) .setPin("#what-we-offer") .setTween(tween) .addTo(controller); The CSS And then the CSS used to set the initial state (although this doesn't seem to have any effect) .infographic-text-wrapper { position: absolute; top: 0; left: 0; opacity: 0; transform:scale(.9); } Final note is that I have tried the suggestions on this page, but to no avail. So frustrated and the lack of google search results on the page mean I'm probably being really stupid, but at this point I would welcome any help I can get...
  6. Hey guys! I am fairly new to GSAP and i am learning it by building stuff. I have an svg in the middle of the page and i would like it to animate to the left and then display the content of the page (which i did not coded yet). When the user clicks it again, i would like to return to its initial state and hide the content of the page. Throughout the past few hours, I tried various on click functions with if else statements but nothing seems to work. With the show/hide part of the content i will deal with it later, for the moment i would like to learn how to fix the clicking part. Thanks in advance!