Jump to content
GreenSock

Search the Community

Showing results for tags 'gsap'.

  • 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

  1. GreenSock

    CSSRulePlugin

    Allows GSAP to animate the raw style sheet rules which affect all objects of a particular selector rather than affecting an individual DOM element's style (that's what the CSSPlugin is for). For example, if you have a CSS class named ".myClass" that sets background-color to "#FF0000", you could tween that to a different color and ALL of the objects on the page that use ".myClass" would have their background color change. Typically it is best to use the regular CSSPlugin to animate css-related properties of individual elements so that you can get very precise control over each object, but sometimes it can be useful to tween the global rules themselves instead. For example, pseudo elements (like :after, :before, etc. are impossible to reference directly in JavaScript, but you can animate them using CSSRulePlugin as shown below. See the Pen CSSRulePlugin by GreenSock (@GreenSock) on CodePen. Learn more in the CSSRulePlugin documentation. To learn how to include the CSSRulePlugin into your project, see the GSAP install docs.
  2. GreenSock

    Physics2DPlugin

    Provides simple physics functionality for tweening an object's x and y coordinates (or "left" and "top") based on a combination of velocity, angle, gravity, acceleration, accelerationAngle, and/or friction. It is not intended to replace a full-blown physics engine and does not offer collision detection, but serves as a way to easily create interesting physics-based effects with the GreenSock animation platform. Parameters are not intended to be dynamically updateable, but one unique convenience is that everything is reverseable. So if you spawn a bunch of particle tweens, for example, and throw them into a timeline, you could simply call reverse() on the timeline to watch the particles retrace their steps right back to the beginning. Keep in mind that any easing equation you define for your tween will be completely ignored for these properties. Usage gsap.to(element, {duration: 2, physics2D: {velocity: 300, angle: -60, acceleration: 50, accelerationAngle: 180}}); See the Pen Physics2D Demo by GreenSock (@GreenSock) on CodePen. Learn more in the Physics2DPlugin documentation. Demos Physics2D Demos To learn how to include Physics2D into your project, see the GSAP install docs.
  3. Sometimes it's useful to tween a value at a particular velocity and/or acceleration without a specific end value in mind. PhysicsPropsPlugin allows you to tween any numeric property of any object based on these concepts. Keep in mind that any easing equation you define for your tween will be completely ignored for these properties. Instead, the physics parameters will determine the movement/easing. These parameters, by the way, are not intended to be dynamically updateable, but one unique convenience is that everything is reverseable. So if you create several physics-based tweens, for example, and throw them into a timeline, you could simply call reverse() on the timeline to watch the objects retrace their steps right back to the beginning. Here are the parameters you can define (note that friction and acceleration are both completely optional): velocity : Number - The initial velocity of the object measured in units per second (or for tweens where useFrames is true, it would be measured per frame). (Default: 0) acceleration : Number - The amount of acceleration applied to the object, measured in units per second (or for tweens where useFrames is true, it would be measured per frame). (Default: 0) friction : Number - A value between 0 and 1 where 0 is no friction, 0.08 is a small amount of friction, and 1 will completely prevent any movement. This is not meant to be precise or scientific in any way, but it serves as an easy way to apply a friction-like physics effect to your tween. Generally it is best to experiment with this number a bit, starting at a very low value like 0.02. Also note that friction requires more processing than physics tweens without any friction. (Default: 0) gsap.to(elem, { duration: 2, physicsProps: { x: {velocity: 100, acceleration: 200}, y: {velocity: -200, friction: 0.1} } }); Demos PhysicsProps Demos To learn how to include the PhysicsPropsPlugin into your project, see the GSAP install docs.
  4. Scrambles the text in a DOM element with randomized characters (uppercase by default, but you can define lowercase or a set of custom characters), refreshing new randomized characters at regular intervals while gradually revealing your new text (or the original text) over the course of the tween (left to right). Visually it looks like a computer decoding a string of text. Great for rollovers. See the Pen GSAP Scramble Text Plugin - feature plugin page by GreenSock (@GreenSock) on CodePen. You can simply pass a string of text directly as the scrambleText and it'll use the defaults for revealing it, or you can customize the settings by using a generic object with any of the following properties: text : String - The text that should replace the existing text in the DOM element. If omitted (or if "{original}"), the original text will be used. chars : String - The characters that should be randomly swapped in to the scrambled portion the text. You can use "upperCase", "lowerCase", "upperAndLowerCase", or a custom string of characters, like "XO" or "TMOWACB", or "jompaWB!^", etc. (Default: "upperCase") tweenLength : Boolean - If the length of the replacement text is different than the original text, the difference will be gradually tweened so that the length doesn't suddenly jump. For example, if the original text is 50 characters and the replacement text is 100 characters, during the tween the number of characters would gradually move from 50 to 100 instead of jumping immediatley to 100. However, if you'd prefer to have it immediately jump, set tweenLength to false. (Default: true) revealDelay : Number - If you'd like the reveal (unscrambling) of the new text to be delayed for a certain portion of the tween so that the scrambled text is entirely visible for a while, use revealDelay to define the time you'd like to elapse before the reveal begins. For example, if the tween's duration is 3 seconds but you'd like the scrambled text to remain entirely visible for first 1 second of the tween, you'd set revealDelay to 1. (Default: 0) newClass : String - If you'd like the new text to have a particular class applied (using a <span> tag wrapped around it), use newClass:"YOUR_CLASS_NAME". This makes it easy to create a distinct look for the new text. (Default: null) oldClass : String - If you'd like the old (original) text to have a particular class applied (using a <span> tag wrapped around it), use oldClass:"YOUR_CLASS_NAME". This makes it easy to create a distinct look for the old text. (Default: null) speed : Number - Controls how frequently the scrambled characters are refreshed. The default is 1 but you could slow things down by using 0.2 for example (or any number). (Default: 1) delimiter : String - By default, each character is replaced one-by-one, but if you'd prefer to have things revealed word-by-word, you could use a delimiter of " " (space). (Default: "") //use the defaults gsap.to(element, {duration: 1, scrambleText:"THIS IS NEW TEXT"}); //or customize things: gsap.to(element, {duration: 1, scrambleText:{text:"THIS IS NEW TEXT", chars:"XO", revealDelay:0.5, speed:0.3, newClass:"myClass"}}); Demos ScrambleText Demos To learn how to include ScrambleText into your project, see the GSAP install docs.
  5. GreenSock

    ScrollToPlugin

    Allows GSAP to animate the scroll position of the window (like doing window.scrollTo(x, y)) or a <div> DOM element (like doing myDiv.scrollTop = y; myDiv.scrollLeft = x;). To scroll the window to a particular position, use window as the target of the tween like this: //scroll to 400 pixels down from the top gsap.to(window, {duration: 2, scrollTo: 400}); //or to scroll to the element with the ID "#someID": gsap.to(window, {duration: 2, scrollTo:"#someID"}); //or to specify which axis (x or y), use the object syntax: gsap.to(window, {duration: 2, scrollTo: {y: 400, x: 250}}); Or to tween the content of a div, make sure you've set the overflow:scroll on the div and then do this: //scroll to 250 pixels down from the top of the content in the div gsap.to(myDiv, {duration: 2, scrollTo: 250}); Learn more in the ScrollToPlugin documentation. To learn how to include the ScrollToPlugin into your project, see the GSAP install docs.
  6. GreenSock

    TextPlugin

    Tweens the text content of a DOM element, replacing it one character at a time (or one word at a time if you set the delimiter to " " (a space) or you can even use a custom delimiter). So when the tween is finished, the DOM element's text has been completely replaced. This also means that if you rewind/restart the tween, the text will be reverted. Here is a simple example of replacing the text in yourElement: //replaces yourElement's text with "This is the new text" over the course of 2 seconds gsap.to(yourElement, {duration: 2, text: "This is the new text", ease: "none"}); If you'd like to use a different delimiter so that instead of replacing character-by-character, it gets replaced word-by-word, just pass an object with configuration properties like this: //replaces word-by-word because the delimiter is " " (a space) gsap.to(yourElement, {duration: 2, text: {value: "This is the new text", delimiter: " "}, ease: "none"}); You can even add a new CSS class to the new text as it comes in. Learn more in the TextPlugin documentation. To learn how to include TextPlugin into your project, see the GSAP install docs.
  7. GreenSock

    GSDevTools

    Your animation workflow is about to get a major boost. GSDevTools gives you a visual UI for interacting with and debugging GSAP animations, complete with advanced playback controls, keyboard shortcuts, global synchronization and more. Jump to specific scenes, set in/out points, play in slow motion to reveal intricate details, and even switch to a "minimal" mode on small screens. GSDevTools makes building and reviewing GSAP animations simply delightful. Get Started Load the JavaScript file //be sure to use a path that works in your dev environment <script src="./js/GSDevTools.min.js"></script> Instantiate GSDevTools GSDevTools.create(); That's it! The demo below shows GSDevTools running with its default settings. It automatically gives you control over every animation on the global timeline. Select an animation by id Any GSAP animation (tween or timeline) can be assigned an id (a string) which causes it to show up in the animation menu. That makes it easy to jump to any scene. Notice how the timeline and each tween below have an id assigned: //give the timeline and child tweens their own id. var tl = gsap.timeline({id: "timeline"}) tl.to(".orange", {duration: 1, x: 700, id: "orange"}) .to(".green", {duration: 2, x: 700, ease: "bounce", id: "green"}); //give this tween an id gsap.to(".grey", {duration: 1, x: 700, rotation: 360, delay: 3, id: "grey"}) //instantiate GSDevTools with default settings GSDevTools.create(); Now each id shows up in the animations menu (lower left). Persistence between refreshes For added convenience, when you manually set the in/out points, animation, timeScale, or looping state in the UI, they persist between refreshes! This means you can drag the in/out points to isolate a particular section and then tweak the code, hit refresh, and see the changes immediately within that cropped area. Any values set in the GSDevTools.create({...}) method will override manual selections. Set persist: false to disable persistence. If you encounter persistence contamination (e.g. setting timeScale in one affects another), simply assign a unique id to the GSDevTools instance (the recorded values are segregated by id, session, and domain). Configuration options GSDevTools can be configured extensively. Optionally define any of these properties in the config object: animation [string | animation] - If you define an animation, like animation: myTimeline, animation: myTween or animation: "id", that animation will be initially selected. By default, the global timeline is selected. container [string | element] - Specify the container element for GSDevTools, like: "#devTools" or document.getElementById ("devTools"). css [object | string] - The CSS you want on the outer div, like {width:"50%", bottom:"30px"} or a string of css like "width: 50%; bottom: 30px". It is safe to use GSAP-specific shortcuts like x, yPercent, etc. in the object syntax because it just gets passed to a gsap.set() internally. globalSync [boolean] - By default, animations are kept in context and synchronized with the root timeline (scrubbing one scrubs them all), but you can set globalSync: false to unhook it from the global timeline. Note: only one GSDevTools instance can be globally synchronized on a page (otherwise scrubbing them both to different times would break the time-space continuum). hideGlobalTimeline [boolean] - If true, the Global Timeline will be removed from the animation menu. id [string] - A unique string to identify the GSDevTools instance. The persistent values between refreshes are mapped to this id, so if you ever run into a case where there's cross-contamination of the persistent values (like if you embed multiple codepens on one page and don't want timeScale changes in one to affect the others on refresh), just make sure you give each one a unique id. inTime [number | string] - Position of the in marker (time, in seconds, or label or animation id). You can even use relative values like "myAnimation-=2" to start 2 seconds before the animation with the id of "myAnimation". If you use just a negative relative value like "-=5" , it will be measured from the end of the timeline, making it easy to just watch the final 5 seconds. keyboard [boolean] - If true (the default), keyboard shortcuts will work. Note: only one GSDevTools instance can listen for keyboard shortcuts. paused [boolean] - Initial paused state. loop [boolean] - Initial loop state. minimal [boolean] - If true, the UI will only show minimal controls (scrubber, play/pause, and timeScale). Note: when the screen is less than 600px it automatically switches to minimal mode anyway. outTime [time | label] - Position of the out marker (time, in seconds, or label, or animation id). You can even use relative values like "myAnimation+=2" to end 2 seconds after the animation with the id of "myAnimation" ends. If you use just a positive relative value like "+=5", it will be measured from wherever the inTime is. persist [boolean] - By default, GSDevTools remembers the in/out points, selected animation, timeScale, and looping state between refreshes in the same domain session, but you can disable that behavior by setting persist: false. timeScale [number] - Initial timeScale. visibility [string] - "auto" causes the controls to automatically hide when you roll off of them for about 1 second, and return when you move your mouse over the area again. Default is "visible", or you can set it to "hidden" to hide the controls initially (useful if you don't want the controls to obscure any part of the screen - you can still use the keyboard shortcuts to control playback or tap the "H" key to toggle visibility). Keyboard Controls SPACEBAR: Play/pause UP/DOWN ARROWS: Increase/decrease timeScale LEFT ARROW: Rewind RIGHT ARROW: Jump to end L: Toggle loop I: Set the in point to current position of playhead O: Set the out point to current position of playhead H: Hide/show toggle Tips and tricks Clicking the GreenSock logo (bottom right) gets you right to the GreenSock docs! Double-click on the in/out marker(s) to reset them both immediately. If the playback UI is obscuring part of your animation, just tap the "H" key to hide it (and again to bring it back) - you can still use all the keyboard shortcuts even when it's invisible. Advanced demos We purposefully chose very basic animations for the demos above, but here are a few that illustrate how easy GSDevTools makes it to control and debug even super-complex animation sequences. How do I get it? GSDevTools is available to Club GreenSock members ("Shockingly Green" and above). Just download GSAP with the bonus files zip from your Dashboard. Try GSDevTools for free on CodePen. To learn how to include GSDevTools into your project, see the GSAP install docs. FAQ Why is my global timeline 1000 seconds long? That means you've probably got an infinitely repeating animation somewhere. GSDevTools caps its duration at 1000 seconds. Scrubbing to Infinity is awkward. Does loading GSDevTools impact runtime performance? Since it must monitor and record the root timeline, yes, there is a slight performance hit but probably not noticeable. Keep in mind that usually you'll only load GSDevTools while you're developing/reviewing your animations and then remove it when you're ready to launch, so ultimately it shouldn't be much of a factor anyway. Why isn't GSDevTools in the CDN or GitHub repo? Because it's a membership benefit of Club GreenSock. It's a way for us to give back to those who support our ongoing development efforts. That's why we've been able to continue innovating for over a decade. See https://greensock.com/why-license for details about our philosophy. Does GSDevTools work with other animation libraries? Nope, it depends on some unique capabilities baked into the GSAP architecture. What will I do with all the time this tool saves me? Take up a new hobby, ponder deep philosophical questions, make cookies - it's up to you.
  8. GreenSock

    TweenMax

    Note: TweenMax has been deprecated in GSAP 3 in favor of the streamlined gsap object. It has 50+ new features and is almost <strong>half the size!</strong> GSAP 3 is backward compatible with the vast majority of GSAP 2 features including TweenMax. Please see the Migration Guide for details. TweenMax lets you animate literally any property of any object that JavaScript can touch (CSS, SVG, React, Vue, Three.js, canvas, motion paths, generic objects, etc.). Before the release of GSAP 3, TweenMax was the most feature-packed (and popular) animation tool in the GSAP arsenal. However in GSAP 3, you no longer even need to reference TweenMax in your code (although you can because GSAP 3 honors the vast majority of legacy code). We strongly recommend migrating to GSAP 3's streamlined syntax. Quick links Getting started What's so special about GSAP? Documentation: Version 2 | Version 3 Showcase (examples) For convenience and loading efficiency, TweenMax version 2 and earlier included TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, BezierPlugin, and EasePack (all in one file). Every bit of that functionality (plus a lot more) is in the GSAP 3 core which is almost half the size. Staggered animations GSAP makes it easy to create staggered animations on multiple objects. The animations can overlap, run in direct sequence or have gaps between their start times. The old TweenMax stagger methods (from version 1 and 2): TweenMax.staggerTo(), TweenMax.staggerFrom() and TweenMax.staggerFromTo() aren't even necessary in GSAP 3 because a "stagger" special property can be added to ANY tween, like in the demo below: Additional Methods (only relevant for version 1 and 2) TweenMax inherits methods from TweenLite and it also has quite a few of its own. ul.chart {width:300px; float:left; margin-right:80px; } ul.chart li:nth-child(1){ font-weight:bold; list-style:none; margin-left:-20px; font-size:20px; margin-bottom:20px; } TweenLite and TweenMax Methods delay() delayedCall() duration() eventCallback from() fromTo() getTweensOf() invalidate() isActive() kill() killDelayedCallsTo() killTweensOf() pause() paused() play() progress() restart() resume() reverse() reversed() seek() set() startTime() time() timeScale() to() totalDuration() totalProgress() totalTime() Methods exclusive to TweenMax getAllTweens() isTweening() killAll() killChildTweensOf() pauseAll() repeat() repeatDelay() resumeAll() staggerFrom() staggerFromTo() staggerTo() updateTo() yoyo() Learn more in the TweenMax version 2 documentation.
  9. Hi, I am trying to recreate the animation which scrolls between content on one scroll back and forth. I have seen people achieve this effect with scrollmagic, i am comfortable with GSAP3 and want to know how can i achieve this with ScrollTrigger + GSAP. Reference: https://www.sequoiacap.com/india/
  10. I'm looking for a developer to convert this slider into React. This was what I had started. It's still missing the infinite loop and auto play feature. function MediaGrid ({title, text, media}) { // Create variables let slider = useRef(null); useEffect(() => { gsap.registerPlugin(Draggable, InertiaPlugin); // Make slider draggable Draggable.create(slider, { type: "x", inertia: true, }, []); }); return ( <section className="block media-grid" style={background}> <div className="slides-container" ref={el => slider = el}> {media && media.map((media, index) => ( <div key={index} className="slideContainer"> <div className="slide"> {media.slide && media.slide.map((slide, index) => ( <div key={index} className="img-wrap"> <Img key={slide.id} fluid={slide.remoteFile.childImageSharp.fluid} /> </div> ))} </div> </div> ))} </div> </section> ) } export default MediaGrid
  11. Hello there, I made a slide animation using gsap. However, pressing the button may cause the animations to be out of order. I cant find the cause.... If there is a way how can I fixed this problem?
  12. Hi, I'm trying to successfully pin two separate elements on the same page: 1. The first section (100vh) which is stacked above the rest of the page. As I scroll I'd like it to move yPercent: -100 out of view. The rest of the page (the other sections) I would like to act normally, no stacking, it should move as a single body. 2. I have a sticky nav in the middle of the page that I'm trying to pin to the top once it's in view and end at the end of the html I'm working off of the `Layered Pinning From Bottom` ScrollTrigger example. I have 1 working but I can't seem to figure out how to do 2. Any advice or feedback would be helpful! Thanks all
  13. I am using gsap to change the position of camera in threejs . I need to control the speed of gsap.to() . Below is my code for changing the position gsap.to( camera.position, { duration: 1, y: 5, } ); Now I need to control the movement speed of it. How to do that. Thanks in advance.
  14. Hi there. I'm a Japanese creator. Please forgive me for my poor English. Thank you for adding the ScrollPlugin. I wanted to add heavy scrolling to the site and give users a special experience. The way to do that is to use document.addEventListener("wheel") to detect how much power you scrolled from event.deltaY and process the value and transform the container class to How to move it. However, we could not benefit from scrollTrigger in this way. How can I benefit from ScrollTrigger? What I want is a way for scrollTrigger to work using the code I wrote in codepen. Wise people, please tell me how to solve this problem.
  15. Hi everyone, I'm trying to play a short video clip on mouseover and play it reverse on mouseout: mouseover: video.play() mouseout: video.playReverse() As there is currently no native function for playing a video reverse, I tried it with setInterval by manipulating currentTime, but this solution is not smooth enough. Is there a smooth solution with GSAP to play a video backwards?
  16. I am playing with spiral animation using tweenlinemax, I saw couple of examples related to spiral animation for growing text font size during animate but I also want to reduce the size of font after 1 second duration. tl.to("#Text",10,{attr:{startOffset:'100%'}}) .to("#theText", 5, {fontSize:50},2) .to("#theText", 5, {fontSize:10},1); //this is not working so is there any way to grow up and down the font size while animate on SVG path using tweens.
  17. Brand new to this, but I'm not seeing the answer out there (maybe I'm looking up the wrong terms). Anyway, I'm doing a few tests, and I'm seeing a flash of the unanimated objects before they come on. For instance, if they animate from 0% scale to 100, they appear for an instant at full size before they disappear and the animation begins. It's only local at the moment, but I see it in both chrome and firefox. I'm using jquery for selectors, and both jquery, TweenMax, and the function to animate are all being loaded in the head before any of the elements are defined in the body html. Is there a typical way to resolve this or most likely cause to look at?
  18. Hi everyone, I'm looking for a way to replicate this effect of this website prototype. It seems like a liquify filter is applied to the images, and when the page scrolls the image is restored. I searched both on this forum and on google but I did not find solutions that could do for me. I'm not a javascript expert, I don't know how to reproduce it. I saw that beyond gsap there are libraries like webgl or curtains.js or pixi.js. Do you have any idea how this can be done? Thank you. https://dribbble.com/shots/6749793-Supreme-Landing-Load-States
  19. I'm trying to do my first ScrollTrigger animation where I have two sections inside a container; first one has three boxes and the next one has a few lines of text. The goal is to animate the lines of text as the user scrolls down only after all the boxes in the previous container have been animated. I have created an example below to demonstrate this. The boxes are being animated as needed, however the lines of text begins animating, while the boxes are still animating. Also, the elements and text containers overlap each other. I'd like the text container to not overlap and reveal the lines of text as they are visible on the viewport. Any idea what I could be doing wrong? Any help is much appreciated, Thank you!
  20. So I've just started learning GSAP and I recently faced a problem with something that I'm trying. So I have multiple div's with the same style as height:20px; background:red; . Now, I used gsap in this to increase the height of the div, which is triggered by clicked event, to 100px. But the problem i've faced is that when I try to animate only one div that has been clicked, both the div's seem to be animated. Now I know what the problem is here and I've even found the solution with jquery using $(this). But i want a Solution using Vanilla JS. Your help would be much appreciated. Thanks. My Code const div = document.querySelectorAll('div'); const divArr = Array.prototype.slice.call(div); const tl = gsap.timeline({ paused: true, reversed: true }); tl.to(divArr, { height: '100px', duration: 1 }) divArr.forEach(e => { e.addEventListener('click', function () { if (tl.reversed()) { tl.play(); } else { tl.reverse(this); } }) })
  21. Hi All, I am currently trying to create an animation using gsap libraries for the very first time...For which I have included the gsap external library from preferences in Phpstorm...pfa the screenshot below Its works just fine on Codepen...you can find the link below Is gsap compatible with PhpStorm?...because the syntax is not getting detected in the IDE....and I am stuck halfway..Your help would be greatly appreciated Thanks, Lionel Sirvel
  22. I'm looking for a developer to be able to convert this exact slider to React. – https://codepen.io/jeffdfarr/pen/qBOzVwb?editors=1010 Here's what I'm looking for it to do... Auto scroll Ability to be draggable Infinite loop Ideally I'm looking to have this done in a 1-2 weeks.
  23. I'm using scrollTrigger to scale the svg used in clip path but the page width is slightly greater than 100vw and height also seem to be a bit more as my center component also scroll a bit up at the end but however when i set markers to true this problem is magically gone and im scratching my head to find a reason for this behaviour can someone help my understand this issue better #EDIT: This was because the initial page (without ScrollTrigger) has no scroll so when ScrollTrigger adds scroll to the page. I.e. Say your page is 1830px initially but then ScrollTrigger puts a 17px scroll bar on the page now your viewport is 1813px but the content is already painted according to 1830px to compensate this 17px extra width the page shows a horizontal scrollbar it can be solved by using body {overflow-y: scroll;} Using this will initially put a scrollbar does solving the issue alltogether What have i learned from this: The main cluprit of this was the pin-spacer div creater by scroll trigger I dont know why but it was wider than the viewport width (1830px compared to 1813px in my case) and at the bottom of the scroll something triggred some a change in trigger element style from. transform: translate3d(0px, 0px, 0px); left: 0px; top: 0.001px; margin: 0px; width: 1830px; height: 890px; padding: 0px; box-sizing: border-box; max-width: 1830px; max-height: 890px; position: fixed; to transform: translate3d(0px, 890.001px, 0px); left: 0px; top: 0px; margin: 0px; width: 1829.52px; height: 889.524px; padding: 0px; bottom: auto; right: auto; this didnt make any sense for me #Solution for this [Techincally just a workaround using css] Enable markers in gsap (because everything is fine when markers are enabled) then use this css rule to hide the markers div[class^="gsap-marker-"] { visibility: hidden; opacity: 0; }
  24. Hello everyone, since a few months I've been working on a wordpress website (with oxygen builder) hosted on digital ocean. Recently I added page transitions thanks to Barbajs and with GSAP I have a swipe up effect. On chrome I have no problem but on Safari the site is slow to load, I don't know if it's the videos that are slow or the GSAP or barba js. The website is currently protected on a private server I can't give you access but here is a piece of my js that calls barba and gsap : function video_text_animation() { let tl = gsap.timeline(); if (tl.scrollTrigger) { tl.scrollTrigger.kill(); } //////// Video Header title ////////////// var childSplit = new SplitText(".bloc_header--header", {type:"lines", linesClass: "bloc_header--header-child"}); var parentSplit = new SplitText(".bloc_header--header", { type: "lines", linesClass: "bloc_header--header-parent"}); var w = window.innerWidth; var size = w > 1366 ? "big" : "small"; if (size === "big") { tl = gsap.timeline(); tl.addLabel("animateVideo").from(childSplit.lines, { duration: 0.5, yPercent: 100, ease: "power4", stagger: 0.1 }); } return tl; } function animation_scroll_text() { gsap.registerPlugin(ScrollTrigger); let tl = gsap.timeline(); if (tl.scrollTrigger) { tl.scrollTrigger.kill(); } //////// Diptyque title ////////////// new SplitText(".dyptique__card-heading--title", {type:"lines", linesClass: "dyptique__card-heading--title-child"}); new SplitText(".dyptique__card-heading--title", {type:"lines", linesClass: "dyptique__card-heading--title-parent"}); var w = window.innerWidth; var size = w > 1366 ? "big" : "small"; if (size === "big") { gsap.utils.toArray(".dyptique__card-heading--title").forEach((section, i) => { tl = gsap.timeline({ scrollTrigger: { id: "trigger2", start: "center 80%", trigger: section, toggleActions: "play pause pause pause", }, }); tl.addLabel("animateDiptyque").from(section.querySelectorAll(".dyptique__card-heading--title-child"), { duration: 0.5, yPercent: 100, ease: "power4", stagger: 0.1 }); }); } //////// Content title ////////////// new SplitText(".bloc_contents--title", {type:"lines", linesClass: "bloc_contents--title-child"}); new SplitText(".bloc_contents--title", {type:"lines", linesClass: "bloc_contents--title-parent"}); if (size === "big") { gsap.utils.toArray(".bloc_contents--title").forEach((section, i) => { tl = gsap.timeline({ scrollTrigger: { id: "trigger3", start: "center 80%", trigger: section, toggleActions: "play pause pause pause", }, }); tl.addLabel("animateTitle").from(section.querySelectorAll(".bloc_contents--title-child"), { duration: 0.5, yPercent: 100, ease: "power4", stagger: 0.1 }); }); } return tl; } function add_scripts() { jQuery(document).ready(function ($) { "use strict"; $('head').append('<link href="https://wordpress-364904-1405009.cloudwaysapps.com/accueil/?xlink=css&ver=5.4.2" rel="stylesheet" type="text/css">'); $('head').append('<link href="https://wordpress-364904-1405009.cloudwaysapps.com/le-mag/?xlink=css&ver=5.4.2" rel="stylesheet" type="text/css">'); $('.center-title').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '1',}); $('.title-anim').attr({'data-aos-enable': 'true','data-aos': 'slide-up','data-aos-anchor-placement': 'top-bottom','data-aos-easing': 'ease','data-aos-duration': '400','data-aos-offset': '50',}); $('.center-title2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '1',}); $('.title-anim-02').attr({'data-aos-enable': 'true','data-aos': 'fade',}); $('.diptyque__card').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',}); $('.bloc_contents--text').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '200',}); $('.quadriptyque__card_1').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',}); $('.quadriptyque__card_2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '400','data-aos-anchor-placement': 'center-bottom',}); $('.quadriptyque__card_3').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',}); $('.quadriptyque__card_4').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '400','data-aos-anchor-placement': 'center-bottom',}); $('.quadriptyque__card--image').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-once': 'true',}); $('.triptyque__card_2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom','data-aos-delay': '200',}); $('.triptyque__card_3').attr({'data-aos-enable': 'true','data-aos-anchor-placement': 'center-bottom','data-aos-delay': '400','data-aos': 'fade',}); $('.triptyque__card').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',}); $('.diptyque__card2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '400','data-aos-anchor-placement': 'center-bottom',}); $('body').addClass('oxygen-aos-enabled'); }); AOS.init({}); window.dispatchEvent(new Event('resize')); } function delay(n) { n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n); }); } // Preload Animation function pageTransition_init() { var tl = gsap.timeline(); tl.set(".footer-main", {display: "none"}); tl.set(".logo-img-pre", {y:100}); tl.set(".loading-screen", {bottom: "-100%", opacity: 1}); tl.to(".loading-screen", {duration: 1.7, height: "100%", bottom: "0%", ease: "Expo.easeInOut",}); tl.to("#video_home_top video", {duration: 0, display: "block"}); tl.to(".header-main", {duration: 0, display: "block"}); tl.to(".footer-main", {duration: 0, display: "block"}); tl.to(".logo-img-pre", {duration: 0.7, delay:-0.7 , y:0, opacity:1, ease:"power4",}); tl.to(".loading-screen", {duration: 1, delay:1, height: "100%", bottom: "100%", ease: "power4",}); tl.to(".logo-img-pre", {duration: 0.3, delay:-1, opacity: 0, display:"none"}); return tl; } // Transition Functions function pageTransition() { var tl = gsap.timeline(); tl.set(".loading-screen", {bottom: "-100%", opacity: 1}); tl.to(".loading-screen", {duration: 1.2, height: "100%", bottom: "0%", ease: "Expo.easeInOut",}); tl.to(".loading-screen", {duration: 1, height: "100%", bottom: "100%", ease: "Expo.easeInOut",}); return tl; } function load_video() { const list_videos = document.getElementsByTagName("video"); for (var i = 0; i < list_videos.length; i++) { list_videos[i].load(); console.log(list_videos[i].readyState); } } jQuery(document).ready(function ($) { "use strict"; jQuery('html, body').animate({scrollTop:0}); var masterTimeline = new gsap.timeline(); masterTimeline .add(pageTransition_init()) .add(video_text_animation(), "-=1"); $(function () { barba.init({ sync: true, transitions: [ { async leave(data) { const done = this.async(); pageTransition(); await delay(1000); done(); } , enter(data) { jQuery('html, body').animate({scrollTop:0}); load_video(); var tl = gsap.timeline(); tl.set("#video_home_top video", {duration: 0, display: "block"}); tl.to(".header-main", {duration: 0, display: "block"}); tl.to(".footer-main", {duration: 0, display: "block"}); } }, ], views: [{ namespace: 'index', beforeEnter(data) { document.body.classList.add("oxy-overlay-header"); add_scripts(); switch_footer(); animation_scroll_text(); video_animation(); }, } }); }); });
×