Jump to content
GreenSock

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

Search the Community

Showing results for tags 'transition'.



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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 32 results

  1. Hey, I'm pretty new at this GSAP thing. I've never made a transition between pages so I don't know the best way to do it. In my animation everything works fine the first time, but from then on it doesn't work the same. I know I should reset the animation to its initial state, but I don't even know where to start. Thanks in advance https://codepen.io/JamalDols/project/editor/AOmBar
  2. Hi all- When this site first loads, and also when you click the menu button, there is a beautiful transition with their logo in black and white. How can achieve this effect with a different logo that's shaped like a triangle of 3 sections (image below)? Reference website: https://www.cahnwilson.com/ Thank, - Martyn
  3. Hi everyone. Can someone help me with animation like this ? https://miro.medium.com/max/800/1*T7YtwbVBbuhdO5g-FA5zKQ.gif The animation as usually start with delay and t looks wierd :( May be someone can give me advice or example. Thanks.
  4. megaman

    Full screen a DIV

    I wish to make some DIV's expand and take up the full screen when clicked on. . I cant just animate their height and width to 100% because this would only work if they are in the top left of the screen when clicked, if they are anywhere else they will end up partially off screen. Would the following steps achieve the effect I want 1) Place the DIV inside a parent DIV (so that I can place absolute positioning on it as default) 2) When clicked - change its position to fixed - animate its top and left properties to 0 - animate its height and width to 100%
  5. Hey all, This is my first time posting here, so let me know if i've given too much / too little detail! I'm having an issue with some css on safari, essentially I have a series of elements, positioned along the Z-axis with transform: translateZ, in order to achieve a parallax effect, however, I would also like to apply a mix blend mode to some of the elements on the page. This works fine on Chrome and FireFox, and displays as expected, however it completely breaks the site on Safari with the content appearing extremely zoomed in, i'm not sure what to try to rectify the issue, i've tried attaching prefixes to everything however this doesn't seem to make any difference, I have attached an image bellow of what the page looks like when viewed in Safari. Any help would be really appreciated thanks!
  6. Hi, I found a part of a transition I wonder how to achieve. Please look at the link below. I'm talking about the transition when the user clicks on the "PLUS"-sign where that scales, moves and transitions to the big black container. I've been trying with scale, transformOrigin, y, x, etc but cant seem to figure out the way to go to? Any ideas? https://dribbble.com/shots/3124285-Personal-Site-JS-Interactions
  7. Hi All, I am new to js animation, can someone explain me how the nav transition works on http://magacom.fr , i want to make the effect with barbajs and #GSAP . Can Someone help with some code example.
  8. Hi, I created a simple pen just to show you the issue I am having in my real project and is related to the transition-delay because I need the animation starts only when the mouse stays in the element the desire time and not before, with CSS is easy because the transition-delay is the one for the job but I don't know how to do the same using JS/GSAP, do you have any idea? In the following example you can see that if you pass your mouse over the orange div, the animation will be triggered only if you stay for more than 0.5s so you can like move your mouse over it and the animation will not be triggered but this is not happening with the blue one because if you put your mouse over the div and you moved out before the 0.5s, the animation still will be triggered.
  9. Hi everyone, this is more of an ask-for-help and guidance rather than actually coding help, but I came across a very nice website page transition, which include its website logo transitioning between 2 pages. I was wondering if its possible to apply with GSAP? Here's the animation I am referring to: https://cl.ly/rXmT It would be great if someone could forward me to somewhere where I can learn to replicate the aforementioned effect. Thanks!
  10. Hello, I have been looking into getting a smooth scrolling effect using GSAP. After looking into Scroll Magic, I realised that what I want to achieve can be done using just using a GSAP timeline. I found something on Codepen which had a similar look to what I was after. I have tweaked this myself but have come to point where I need a bit of help/advice. Basically, my webpage will consist of one page made up of 3 full width sections, each one being 100vh/% in height (so 3 separate panels). The first panel will contain some information and a background image. The second panel will also contain some content but will have a background video applied instead of an image The third will be the same as the first, only with a different background image being used. What I'm trying to achieve to have the panels transition into one another smoothly as you scroll. A simple opacity swap and scale tweak so that as you scroll down the page, panel 1 fades into panel 2 and then panel 2 fades into panel 3. I am having some difficulty with my timeline I think. Currently the top 2 panels fade into each other quite well but I'm having difficulty adding the 3rd panel into the mix. If anyone can offer any advice/help on this then it'd be much appreciated. My codepen URL is https://codepen.io/anon/pen/ZobLYL
  11. I put my code in codepen but it don't seem to work and I don't know why. Anyway my problem is when I scroll down to see the next slide the image don't fade to the next one but when I scroll up to see the previous slide it does. Any idea ?? I'm new to the greensock universe so don't be to rough with me. Thanks guys !!!
  12. Hello Gsap'ers, Another post about the function so requested: Transition between pages using our beloved GSAP. But unlike the others, instead of questions, I am bringing some answers. I decided to make a Simple site template with SPA, which I believe will help everyone who is looking for solutions to these tools without having to use a framework. The activation of transitions is very simple: just click on the photos to go to the corresponding page. I hope it's useful. Ps¹: It is necessary to use the BarbaJS lib Ps²: Some settings are still missing and you can optimize the codes, best experience in Debbug Mode View Ps³: I'm using the translator hahaha https://codepen.io/Noturnoo/project/full/ZeYREp/
  13. Hi everyone! Would love to get your opinion on what might be causing performance bottlenecks in a page transition animation I'm working on. Live WIP site is here: http://adamwagner.io/ Click on the first image below the Lorem Ipsum "about me" section. The image is of a band playing. Notice the low frame rate as the image animates to the hero position, a circular splash element hides the page, and then the route changes to the project detail page. Click the "back" text at bottom left below the hero image. This will take you back to the home page with a reverse animation. NOTE: only works in Chrome because I'm using webm for the image I refer to above. Will fix for prod of course. Performance increases after multiple runs, but typically first run performance is very janky. I would love some tips - even if they involve a totally different approach. Thank you so much in advance! I've attempted to use best practices. For instance, I clone the image before animating, making it fixed position to avoid reflow. GSAP delightfully takes care of optimizing position tweens, but I also need to animate height and width. I also need to set autoRound: false, because I need perfect overlap with the real hero image once the transitory clone is removed. Here's the code: import React from 'react' import { injectGlobal, styled } from "styled-components"; import {TweenMax, Bezier, TimelineMax, Power3, Sine} from "gsap"; import store from 'store' // import ripple from '../utils/splash' let globalSpeed = 1; export default class ProjectImage extends React.Component { getDuration(start, end) { let pixelsPerSecond = 700; let duration = Math.abs((end - start) / pixelsPerSecond); // set min value of .2 duration = duration < .25 ? .25 : duration // set max value of .5 duration = duration > .5 ? .5 : duration return duration * globalSpeed; } onImageClick = (e) => { // get the first element - the <body> let body = document.body // get window width minus scrollbar let w = body.clientWidth let h = body.clientHeight // get clicked project element and position data let el_original = this.refs.project_image let {top, left, width, height} = el_original.getBoundingClientRect(); // clone it let el = el_original.cloneNode() // place element on top of original // find a cleaner way to copy these over let elStyles = ` cursor: pointer; width: 100%; height: 40vw; will-change: width, transform; background-image: url(${this.props.image}); background-position: center center; background-size: cover; pointer-events: none; ` el.style.cssText = elStyles + `z-index:200; position: fixed; top:${top}px; left:${left}px; width:${width}px; height:${height}px;` body.append(el) // get mouse click coordinates let {clientY, clientX} = e; // save original image coords for "going back" transition store.set('lastClickedProject', {top, left, width, height}) // create and append splash circle let splash = document.createElement('div') splash.style = ` border-radius:100%; width: 50px; height: 50px; background: ${this.props.pageColor}; position: fixed; top:${clientY}px; left:${clientX}px; z-index:100; opacity: 0.75; will-change: transform; ` body.append(splash) // animate splash TweenMax.to(splash, (0.6 * globalSpeed), {scale:80, opacity:1, transformOrigin: "50% 15%"}, Sine.easeIn); // animate image to the hero position TweenMax.to(el, this.getDuration(0, top), {bezier: {curviness:0.25, values:[ {x:0, y:0, width:width, height: height}, {x:-left, y:-(top/2.5), width: w, height: height+25}, {x:-left, y:-top, width: w, height: height+100}, ]}, ease:Power3.easeOut, autoRound:false}); // redirect to detail page setTimeout(() => { el.remove() splash.remove() window.___navigateTo(this.props.path) }, (this.getDuration(0,top)*1000)) } render() { let style = { cursor:'pointer', width:'100%', height:'40vw', willChange:'width, transform', backgroundImage:`url(${this.props.image})`, backgroundPosition:'center', backgroundSize:'cover', } return ( <div onClick={this.onImageClick} style={style} ref="project_image"> </div> ) } }
  14. Simple question with perhaps a complicated answer. Is it possible to animate multiple objects towards a central point in GSAP? Rather than adding positioning tweens to each individual object? For example I have a scene with objects around the canvas, I'd like them to slide onto the canvas towards the middle of the canvas.
  15. Any idea how one would go about creating a jalousie, Something like what is found here
  16. Guys i really need help on this. Basically as you can see from the linked codepen i have a lowpoly lion in SVG, all made out of single triangles. At the moment i made this animation of all the pieces falling from a single spot and forming the image, but what i need is different. I need all the pieces to come randomly from all the directions, top, lef, right, bottom, all going to the center and create the lion. There is a simple way to make this with TweenMax? I dont really know how to make this and i'm not really good with Javascript. Thanks in advance!
  17. Hi, I figured how to do it, But I Cannot understand the real logic behind it. if I ask a centered div to move X by 250px, then the next animation one by the same distance. they should end up a 500px ... with equal mouvement right ? .. I've made a simple codepen. I need to understand, even things this simple !
  18. I am missing something that I know should be easy for someone well experienced. I have only a couple of months of web design experience. I have a intro timeline and another one trigger on scroll. Both attach to a scrollmagic controller. The intro should finish before the user scroll down. I tried to overflow: hidden on y axis etc... doesn't work. But hidden the scrollbar is not good User experience. IF the intro played completely the first scene is good and reverse fine. But when the user scroll down to the first scene (of 6 scene total) and the intro is not done everything break down when the reverse of intro is triggered. And if windows is refresh on scene1. The intro start. IS there a way to somehow reset the intro timeline if the user reverse back on intro when they scroll down to scene1. And to lock the intro animation when refresh on scene1 or scene2 ...3....Maybe it's a scrollmagic coding but maybe greensock has a specific code to resolve this http://codepen.io/dominium/pen/zKyZZd Thanks in advance
  19. Hello, I am working with SVG object (Map), I have divided it by regions and now trying to append on-click zoom-in and zoom-out function. I have decided to make zooming function via changing Transform's "scale" and "translate" properties. Example is here: https://codepen.io/Creedplay/pen/oLRPjY Just check JS lines, and for test click on red object. I have used TweenMax library for transition change of up mentioned properties. My problem is a visual of transition, the "zoom effect" does not go straight to object, it starts from left and then goes to object. I think reason for it is asynchronous change of "scale" and "translate" properties. but I am not sure how to fix it. Can anyone explain why it does this? and help me to fix? I would like to make "zoom effect" to look like this: https://bl.ocks.org/mbostock/9656675 Thanks in advance.
  20. http://allthetime.co.nf/GSAPslider/ I'm developing a GSAP slider and it works well now with keyboard and click control. I want to be able to animate between states upon receiving a click/key event. So, when it's on slide 1 and I click the button for slide 4 instead of going to slide 4 instantly, the animation scrolls quickly across slide 2 and 3 and then lands at 4. Any ideas?
  21. Hey, I am working on a circular animation mainly based around animating the rotation property of clips and run into an issue with smoothly transition between an initial animation using the "StrongIn" ease and a follow-up of "SlowMo"-eases. I have made some tests with sequencing SlowMo animations and they seem to transition smoothly even if using different values for the params. But getting into the SlowMo smoothly from the other animation doesn’t work for me at the moment. Does anybody have any advice on how to accomplish this or done this in the past? Is it possible to have "finer" control over the SlowMo ease like controlling the ease for the beginning and the end of the SlowMo separately? Really appreciate any help!
  22. Hi, guys! I'm new to JS and GSAP and need some help. I'm trying to make quite a simple thing: hide login form with opacity transition. But if you make it like this: TweenMax.to(".plate", .3, {opacity: 0}); ...it just makes the form window transparent, but not hide it — you still can roll mouse over "close" button and over the input field and see how the cursor changes the shape. I have to set display: none; property after the animation is finished. And when I do it like this, the animation doesn't work: TweenMax.to(".plate", .3, { opacity: 0, onComplete: function() { TweenMax.set("."+type, {display:none}); } }); On top of that, the browser detects this JS as it has a syntax mistake, because when I load HTML page none of JS works on the page. Maybe I'm doing something wrong? Please, help to solve the issue. P.S. Is there any forum search? Couldn't find "search on the forum" button.
  23. Hello Everyone! I encountered a problem for which I can not find a solution. I would like to make the transition from one slide to another, something very similar to CSS clip. The problem is that I need a diagonal bar to sweep the screen from right to the left, showing the content that lies beneath. Does anyone have any idea on how to achieve that? I have attached a picture that might explain a little bit better what I am trying to do. Any help is very much appreciated!
  24. I am reading Google Material animation guidelines. https://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight Has anyone able to mimic as close as possible to it? Does anyone has a set of easing values I can plug and play? Cheers, Venn.
  25. Hello, how do i change an effect when scrolling to next slide? I was trying to find some effect options in this codepen - http://codepen.io/bassta/pen/kDvmC but I didnt succeed. For example something similiar to this - http://www.bistroagency.cz/ They use some transitions between each slide, It kinda looks 3d. Thank you!
×