Jump to content
Search Community

Search the Community

Showing results for tags 'responsive'.

  • 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. I am going slightly mad. I have spent nearly a week trying to get this to work and I can't understand what's going on. I have been trying to some basic pinning with a clip mask and I just can't get it to behave responsibly. Annoyingly on that codepen URL it's actually okay, but on my website, it's not, which I realise makes things difficult. I have done another codepen with ALL my GSAP code (rather than it reduced to the animation in question which is linked above) and that one glitches more so there must be some offending code elsewhere, but I can't work out what, as it all seems fine to me. https://codepen.io/shereewalker/pen/gOyxppY I am removing each piece of extra JS to see if I can work it out, but so far nothing is working. I am basically just trying to refresh the calculations on window resize for that animation - and actually for all of them Any help would be amazing as I am at my wits end! Thanks!
  2. Hello GSAP community! I'm currently working on an animation using GSAP in a React component. Everything works well, but I've encountered an issue where the animation stops when the screen width exceeds 1200 pixels. I've set up a useEffect to handle resizing, creating a new animation instance when the window is resized. However, it seems that the animation is not continuing as expected for larger screens. Here's a snippet of my code: Im Use React and Talwind code this me Component import React, { useEffect, useRef } from 'react'; import { gsap, MotionPathPlugin } from 'gsap/all'; import { useGSAP } from '@gsap/react'; gsap.registerPlugin(MotionPathPlugin); export default function CornerBottomRight({ color, disabledAnimation = false, isExpanded }: { color?: string, disabledAnimation?: boolean isExpanded?: boolean }) { const pathRef = useRef(null); useGSAP(() => { let cornerBottomRightAnimation = gsap.to(pathRef.current, { duration: 5, repeat: -1, ease: "linear", motionPath: { path: "#LineRuth", align: "#LineRuth", alignOrigin: [0.5, 0.5], }, }); cornerBottomRightAnimation.play(); const handleResize = () => { console.log("resize"); // Detén la animación actual cornerBottomRightAnimation.kill(); // Crea una nueva instancia de la animación cornerBottomRightAnimation = gsap.to(pathRef.current, { duration: 5, repeat: -1, ease: "linear", motionPath: { path: "#LineRuth", align: "#LineRuth", alignOrigin: [0.5, 0.5], }, }); // Reproduce la nueva animación cornerBottomRightAnimation.play(); }; window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); cornerBottomRightAnimation.kill(); }; }, []); return ( < div className='w-full h-full'> <svg width="376" height="114" viewBox="0 0 376 114" preserveAspectRatio="xMidYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg" > <g id="6.3 1"> <g id="VisualLine"> <path id="CirclesFillDesktop" d="M32.52 61.9H32.4C30.19 61.9 28.4 60.11 28.4 57.9C28.4 55.69 30.19 53.9 32.4 53.9H32.52C34.73 53.9 36.52 55.69 36.52 57.9C36.52 60.11 34.73 61.9 32.52 61.9ZM298.94 61.9H298.69C296.48 61.9 294.69 60.11 294.69 57.9C294.69 55.69 296.48 53.9 298.69 53.9H298.94C301.15 53.9 302.94 55.69 302.94 57.9C302.94 60.11 301.15 61.9 298.94 61.9ZM278.45 61.9H278.2C275.99 61.9 274.2 60.11 274.2 57.9C274.2 55.69 275.99 53.9 278.2 53.9H278.45C280.66 53.9 282.45 55.69 282.45 57.9C282.45 60.11 280.66 61.9 278.45 61.9ZM257.95 61.9H257.7C255.49 61.9 253.7 60.11 253.7 57.9C253.7 55.69 255.49 53.9 257.7 53.9H257.95C260.16 53.9 261.95 55.69 261.95 57.9C261.95 60.11 260.16 61.9 257.95 61.9ZM237.46 61.9H237.21C235 61.9 233.21 60.11 233.21 57.9C233.21 55.69 235 53.9 237.21 53.9H237.46C239.67 53.9 241.46 55.69 241.46 57.9C241.46 60.11 239.67 61.9 237.46 61.9ZM216.97 61.9H216.72C214.51 61.9 212.72 60.11 212.72 57.9C212.72 55.69 214.51 53.9 216.72 53.9H216.97C219.18 53.9 220.97 55.69 220.97 57.9C220.97 60.11 219.18 61.9 216.97 61.9ZM196.47 61.9H196.22C194.01 61.9 192.22 60.11 192.22 57.9C192.22 55.69 194.01 53.9 196.22 53.9H196.47C198.68 53.9 200.47 55.69 200.47 57.9C200.47 60.11 198.68 61.9 196.47 61.9ZM175.98 61.9H175.73C173.52 61.9 171.73 60.11 171.73 57.9C171.73 55.69 173.52 53.9 175.73 53.9H175.98C178.19 53.9 179.98 55.69 179.98 57.9C179.98 60.11 178.19 61.9 175.98 61.9ZM155.49 61.9H155.24C153.03 61.9 151.24 60.11 151.24 57.9C151.24 55.69 153.03 53.9 155.24 53.9H155.49C157.7 53.9 159.49 55.69 159.49 57.9C159.49 60.11 157.69 61.9 155.49 61.9ZM134.99 61.9H134.74C132.53 61.9 130.74 60.11 130.74 57.9C130.74 55.69 132.53 53.9 134.74 53.9H134.99C137.2 53.9 138.99 55.69 138.99 57.9C138.99 60.11 137.2 61.9 134.99 61.9ZM114.5 61.9H114.25C112.04 61.9 110.25 60.11 110.25 57.9C110.25 55.69 112.04 53.9 114.25 53.9H114.5C116.71 53.9 118.5 55.69 118.5 57.9C118.5 60.11 116.71 61.9 114.5 61.9ZM94 61.9H93.75C91.54 61.9 89.75 60.11 89.75 57.9C89.75 55.69 91.54 53.9 93.75 53.9H94C96.21 53.9 98 55.69 98 57.9C98 60.11 96.21 61.9 94 61.9ZM73.51 61.9H73.26C71.05 61.9 69.26 60.11 69.26 57.9C69.26 55.69 71.05 53.9 73.26 53.9H73.51C75.72 53.9 77.51 55.69 77.51 57.9C77.51 60.11 75.72 61.9 73.51 61.9ZM53.02 61.9H52.77C50.56 61.9 48.77 60.11 48.77 57.9C48.77 55.69 50.56 53.9 52.77 53.9H53.02C55.23 53.9 57.02 55.69 57.02 57.9C57.02 60.11 55.23 61.9 53.02 61.9ZM319.31 61.9H319.19C316.98 61.9 315.19 60.11 315.19 57.9C315.19 55.69 316.98 53.9 319.19 53.9H319.31C321.52 53.9 323.31 55.69 323.31 57.9C323.31 60.11 321.52 61.9 319.31 61.9Z" fill="#1D1D1B" /> {/* <path id="CirclesFillMobile" d="M32.56 65.1H32.34C28.36 65.1 25.14 61.88 25.14 57.9C25.14 53.92 28.36 50.7 32.34 50.7H32.56C36.54 50.7 39.76 53.92 39.76 57.9C39.76 61.88 36.54 65.1 32.56 65.1ZM299.04 65.1H298.59C294.61 65.1 291.39 61.88 291.39 57.9C291.39 53.92 294.61 50.7 298.59 50.7H299.04C303.02 50.7 306.24 53.92 306.24 57.9C306.24 61.88 303.01 65.1 299.04 65.1ZM278.55 65.1H278.1C274.12 65.1 270.9 61.88 270.9 57.9C270.9 53.92 274.12 50.7 278.1 50.7H278.55C282.53 50.7 285.75 53.92 285.75 57.9C285.75 61.88 282.52 65.1 278.55 65.1ZM258.05 65.1H257.6C253.62 65.1 250.4 61.88 250.4 57.9C250.4 53.92 253.62 50.7 257.6 50.7H258.05C262.03 50.7 265.25 53.92 265.25 57.9C265.25 61.88 262.02 65.1 258.05 65.1ZM237.56 65.1H237.11C233.13 65.1 229.91 61.88 229.91 57.9C229.91 53.92 233.13 50.7 237.11 50.7H237.56C241.54 50.7 244.76 53.92 244.76 57.9C244.76 61.88 241.53 65.1 237.56 65.1ZM217.07 65.1H216.62C212.64 65.1 209.42 61.88 209.42 57.9C209.42 53.92 212.64 50.7 216.62 50.7H217.07C221.05 50.7 224.27 53.92 224.27 57.9C224.27 61.88 221.04 65.1 217.07 65.1ZM196.57 65.1H196.12C192.14 65.1 188.92 61.88 188.92 57.9C188.92 53.92 192.14 50.7 196.12 50.7H196.57C200.55 50.7 203.77 53.92 203.77 57.9C203.77 61.88 200.54 65.1 196.57 65.1ZM176.08 65.1H175.63C171.65 65.1 168.43 61.88 168.43 57.9C168.43 53.92 171.65 50.7 175.63 50.7H176.08C180.06 50.7 183.28 53.92 183.28 57.9C183.28 61.88 180.05 65.1 176.08 65.1ZM155.59 65.1H155.14C151.16 65.1 147.94 61.88 147.94 57.9C147.94 53.92 151.16 50.7 155.14 50.7H155.59C159.57 50.7 162.79 53.92 162.79 57.9C162.79 61.88 159.55 65.1 155.59 65.1ZM135.09 65.1H134.64C130.66 65.1 127.44 61.88 127.44 57.9C127.44 53.92 130.66 50.7 134.64 50.7H135.09C139.07 50.7 142.29 53.92 142.29 57.9C142.29 61.88 139.06 65.1 135.09 65.1ZM114.6 65.1H114.15C110.17 65.1 106.95 61.88 106.95 57.9C106.95 53.92 110.17 50.7 114.15 50.7H114.6C118.58 50.7 121.8 53.92 121.8 57.9C121.8 61.88 118.57 65.1 114.6 65.1ZM94.1 65.1H93.65C89.67 65.1 86.45 61.88 86.45 57.9C86.45 53.92 89.67 50.7 93.65 50.7H94.1C98.08 50.7 101.3 53.92 101.3 57.9C101.3 61.88 98.07 65.1 94.1 65.1ZM73.61 65.1H73.16C69.18 65.1 65.96 61.88 65.96 57.9C65.96 53.92 69.18 50.7 73.16 50.7H73.61C77.59 50.7 80.81 53.92 80.81 57.9C80.81 61.88 77.58 65.1 73.61 65.1ZM53.12 65.1H52.67C48.69 65.1 45.47 61.88 45.47 57.9C45.47 53.92 48.69 50.7 52.67 50.7H53.12C57.1 50.7 60.32 53.92 60.32 57.9C60.32 61.88 57.09 65.1 53.12 65.1ZM319.35 65.1H319.13C315.15 65.1 311.93 61.88 311.93 57.9C311.93 53.92 315.15 50.7 319.13 50.7H319.35C323.33 50.7 326.55 53.92 326.55 57.9C326.55 61.88 323.33 65.1 319.35 65.1Z" fill="#1D1D1B" /> */} </g> <g id="Ruths"> <path id="LineRuth" d="M319.5 58.45H32.48V57.45H319.5V58.45Z" fill="#1D1D1B" /> <path id="reverseLine" d="M319.5 58.38H32.48V57.38H319.5V58.38Z" fill="black" /> </g> <path ref={pathRef} id="BigCircles" className="arrow" fill="rgb(255,203,97)" fill-opacity="1" d=" M0,-8 C0,-8 8,8 8,8 C8,8 -8,8 -8,8 C-8,8 0,-8 0,-8z"></path> {/* <path id="BigCircles" ref={pathRef} d="M319.09 49.88C323.51 49.88 327.09 53.46 327.09 57.88C327.09 62.3 323.51 65.88 319.09 65.88C314.67 65.88 311.09 62.3 311.09 57.88C311.09 53.46 314.67 49.88 319.09 49.88Z" fill="#1D1D1B" /> */} </g> </svg> </div> ); } I've ensured that the resize event is captured, and a new animation instance is created and played, but the issue persists. Any insights or suggestions on how to make the animation responsive for larger screens would be greatly appreciated! Thank you in advance for your help. Feel free to customize the message based on additional details or specific points you'd like to highlight regarding your implementation.
  3. Hello! I have recently encountered a problem where I am trying to revert the parent divs after a browser resize, but it is not reverting at all! I am trying to revert the "paragraph-" and "headerParentSplit" before the animation starts (as long as it has been set before) I have tried debugging by console logging this if statement, and it does go through, although it still does no difference. First picture with only one header line, is how it should look like. This is what happens when you enter the website with a fullscreen resolution. The other picture with a red and black background for the header, is how it looks like. The reason behind this is that the div is split into lines when the resolution was smaller (therfore it is two divs). It does not revert with the following code.. function setupSplits() { const paragraph = document.querySelectorAll("p"); const header = document.querySelectorAll("h1, h2"); if (headerParentSplit != null) { headerParentSplit.revert(); paragraphParentSplit.revert(); } var headerParentSplit = new $SplitText(header, { // type: "words", linesClass: "split-parent", }); var paragraphParentSplit = new $SplitText(paragraph, { // type: "words", linesClass: "split-parent", }); header.forEach((header) => { // Reset if needed if (header.anim) { header.anim.progress(1).kill(); header.split.revert(); } header.split = new $SplitText(header, { type: "lines,words", linesClass: "split-line", }); // Set up the anim $gsap.set("h1, h2", { visibility: "visible", }); header.anim = $gsap.from(header.split.words, { scrollTrigger: { trigger: header, toggleActions: "restart pause resume reverse", start: "top 95%", }, duration: 0.7, ease: "circ.easeOut", yPercent: 100, opacity: 0, stagger: 0.015, }); }); paragraph.forEach((paragraph) => { // Reset if needed if (paragraph.anim) { paragraph.anim.progress(1).kill(); paragraph.split.revert(); } paragraph.split = new $SplitText(paragraph, { type: "lines,words,chars", linesClass: "split-line", }); $gsap.set("p", { visibility: "visible", }); paragraph.anim = $gsap.from(paragraph.split.words, { scrollTrigger: { trigger: paragraph, toggleActions: "restart pause resume reverse", start: "top 95%", }, duration: 0.6, ease: "circ.easeOut", yPercent: 100, opacity: 0, stagger: 0.005, }); }); } onMounted(() => { setupSplits(); $ScrollTrigger.addEventListener("refresh", () => { setupSplits(); }); });
  4. I am using this slider as a way to slide through items, now the problem is not in desktop view, there it works well, the main issue is in mobile view which seems to be bugging out and leaving a huge pin space and when scroll down the pin space wont get small or something which makes the items to scroll but there being huge gap between next element i tried doing my research for a day but could not find the issue, chatgpt was also not able to help angry-tess-mzkscz - CodeSandbox THis is my codesandbox link, please open it in new window and then use mobile view with dev tools to replicate the issue
  5. Hi Everyone. Greetings from Perú. I'm stuck with this functionality and I come here for your help. I will try to explain: I have a main section pinned with scrollTrigger and inner it I have a "slider" with multiple items and dot navigation. This slider should change its items while make scroll. Then when is mobile view the slider move his items horizontal and when is desktop the items movement is vertical. Also, the dot navigation should be updated with every item showed. ---- I try to use scrollTrigger in every item but I don't have good results as you can see in the codepen attached. I attached images for reference. I hope you can help me. Thanks for your attention. Have a nice day!!
  6. I have a basic gsap animation set up with matchMedia. ScrollTrigger.matchMedia({ "(min-width: 700px)": function () { let containerWidth = parseInt(getComputedStyle(document.querySelector(".see-through")).width); let tl = gsap.timeline({ scrollTrigger: { / .... } }); tl.to(".logo-transparent", { x: containerWidth/2, scale: "0.8" }); }, "(max-width: 699px)": function () { let containerHeight = parseInt(getComputedStyle(document.querySelector(".see-through")).height); let tl = gsap.timeline({ scrollTrigger: { / .... } }); tl.to(".logo-transparent", { y: containerHeight/2, scale: "0.9" }) } }); Now what I want is to update the values of containerWidth and containerHeight on each resize event. I tried adding an eventListener for resize event and updating the variables, but it still has no effect on the animation. Perhaps the animation is not updated on each resize unless the media breakpoints change. What approach can I follow for the desired effect?
  7. i have this scrolltriggger animation var tl = gsap.timeline({ scrollTrigger:{ trigger:".steps ", start:"top center", end:"+=4000px", scrub:5, pin:true, } }); tl.from(".step_img",{duration:3, y:440 ,scale:1.5}) tl.to(".step_img",{duration:3,x:260 }) i want to change the x to 0 in mobile viewport or disable this line in mobile viewport tl.to(".step_img",{duration:3,x:260 })
  8. Requirement We are looking for a front-end developer with knowledge on animations (GSAP, three, locomotive, etc.) together with good references and high proficiency on performance. Translating pixel perfect prototypes into high quality code Visual and engineering mindset Great attention about details on design Project Responsive one page website The page has five main sections that are intro, about, works, clients, contact with some transitions between these sections. Scroll trigger functions Thanks for your time, send me a DM with some interesting and visually complex samples that you have done.
  9. Hello all! ? I'm struggling to understand some concepts of GSAP (Timeline) and ScrollTrigger. I have a simple animation like a door opening and closing when the user scrolls down. There will be a content for each section behind these doors. So, regarding this I have 2 main questions: 1. Slowing down the scroll If I need to go through each section slower then it is right now, should I increase the height of the section? Not the duration of the tween? 2. Responsiveness I added some media queries that will change the size of the content text. If the size of the window changes, there is a bug. The animation doesn't respect the new size/position and I can't figure out why ? Thank you!!! ? PS: I don't know why but in the embed CodePen, the LocomotiveScroll seems not to be working.
  10. I'm working on a menu that needs to react differently for mobile vs desktop. I got it working but when I change the viewport width, the animation and reverse animation are bugged one time, after that they adept to the 'new' situation. On browser refresh it also works correctly. Can anyone point out why the animations don't work correctly when changing the viewport width the first time? If I look in the inspector I see the values being being used are still from the other timeline, even though the new screensize is active.. Item 2 slides out a sub-menu, other items should do the same but I left that out for now.
  11. Hello everyone, I have an animation that needs to display only above 992px width and 700px height. however it seems i cant add more than one condition to matchMedia. What is the (proper) way to do this? (I hope you dont mind i used your matchMedia demo as a starting point for my codepen) Thanks, Patrick Rijkee
  12. Hi all, I'm new with GreenSock and quite happy with I've done until now with it! I've to do a animation through a path. All seems right up to here. But it needs to be responsive. I mean, as the path adapts to the width of the screen, the animation should also adapt. Is it possible to do this with GS? Any help will be really apreciated. Thanks!
  13. Hi there, I’ve just started using the ScrollTrigger plugin, which is SO awesome - thank you for all the work put into this. I’m worried I’m over complicating things, especially in regards to making my ScrollTrigger instances responsive. Basically I have 2 ScrollTrigger instances for desktop (anything above 800px) and 1 tween with a ScrollTrigger instance for mobile (anything below 800px). I want the 2 desktop ScrollTrigger instances to only run on desktop and the mobile tween with ScrollTrigger to only run on mobile. Everything works great on initial load for both desktop and mobile, but if resizing the viewport, everything goes a bit whacky/breaks (things go out of place/overflow, and I can’t tell if the instances are duplicating or if just the markers are being repeated). As well, my desktop ScrollTrigger instances won’t run if resizing from mobile and my mobile tween with ScrollTrigger won’t run if resizing from desktop. I’ve been wracking my brain, searching high and low in the docs and forums trying different things for 3 days now, but I’m not quite getting it. Any help would be incredibly appreciated. Thank you so much.
  14. Hi everybody, I try to make tween menu responsive but got lost. ? I use watchmedia and addListener to change width of menu panel but my script obviously does not work properly when a) resizing the window b) resizing window and clicking menu button. Is there a good soul that could help me to fix it? Your ideas are welcome. Thanks a lot. Jiri
  15. GreenSock

    GSAP 1.13.1 Released

    Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Percentage-based transforms (great for responsive animation) Have you ever had to Google "vertically center a div with CSS"? Maybe you used a bunch of jQuery code that measures the width and height of a bunch of elements so that you can center them based on half-width and half-height? Ever used an onresize event to painstakingly recalculate the size and position of multiple elements that you need for a full-screen, responsive animation? We have very good news for you. CSSPlugin recognizes two new special properties: xPercent and yPercent which can be combined with regular x and y transforms to deliver unprecedented positional control. And yes, since these are transforms, they can be GPU-accelerated for outstanding performance. Example: using xPercent for responsive fullscreen sliders / carousels With the new xPercent property you can easily create fullscreen sliders that don't require lots of costly calculations when screens change size, nor do you have to create separate animations for different devices. Notice how in the demo below you can change the width of the black container and the animation seamlessly adjusts. No code trickery behind the scenes, the TimelineMax animation is built only once. See the Pen xPercent / basic by GreenSock (@GreenSock) on CodePen. To achieve this type of centered layout you could use the following simplified approach //CSS to place origin of all elements in the center or their parent .myClass { position:absolute; left:50%; top:50%; } //JS //center all .myClass elements around their origins TweenLite.set(".myClass", {xPercent:-50, yPercent:-50});//handles all vendor prefixes of translateX(-50%) translateY(-50%) //now we can animate myElement's x/y such that its center is 100px,200px from the origin TweenLite.to(myElement, 1, {x:100, y:200}); CSSPlugin accomplishes this under the hood by prepending a translate(x,y) to the normal matrix() or matrix3d() that it sets on the element. <div class="myClass" style="transform: translate(-50%, -50%) translate3d(150px, 0px, 0px);"></div> As a convenience, if you set the regular x or y to a percent-based value like 50%", GSAP will recognize that and funnel that value to xPercent or yPercent property for you, but we recommend using xPercent/yPercent directly. Thanks to Gary Chamberlain for prompting this feature. Better RequireJS/AMD/Browserify/Node/CommonJS compatibility We have received quite a few requests to make GSAP work with module/dependency tools like RequireJS, Browserify, etc. and we're happy to announce that as of version 1.13.1, that wish has been granted. So, for example, with Browserify you can require("./TweenLite.js") and it'll work. If you're a RequireJS user, snag a super simple example set of files here. A special thanks to David Hellsing for his assistance. Save kb by skipping jQuery. Default selector: document.querySelectorAll() Probably the most common reason that developers load jQuery is to leverage it as a selector engine but all modern browsers support document.querySelectorAll(), so as of version 1.13.1, GSAP uses that as a fallback (after attempting to detect a selector engine like jQuery). That means that you can do something like this, for example: TweenLite.to("li:first-child, li:last-child", 1, {opacity:0.5}); Without loading jQuery. And more Several minor bugs have been squashed too, so make sure you snag the latest files to make sure you're rockin' buttery smooth 60fps animations. Recommended reading: Main GSAP JS page lagSmoothing() and other performance improvements in 1.12.0 Myth Busting: CSS Animations vs JavaScript Why GSAP? A practical guide for developers
  16. Im quite new to GSAP and currently working on a project. I found this slider here online: https://codepen.io/gvrban/pen/qjbpaa and modifyed it to fit my needs. You can find a it on codepen: https://codepen.io/anon/pen/KEYRBY (its ripped out of my project and anonymized so don't wonder for the look) Only problem is, if I resize the page, the slider is of and I have to do a reload of the page to get it fitting again. I understand that it is cause of the calculated variables (which are off after a resize). Is there an easy way to make it responsive or do I have to recalculate it with a window.resize? Thanks in advance.
  17. Hi! I'm a little stuck on a little issue ? I am trying to make a simple responsive variable in a tween. At different screen sizes, the box needs to move up by varying amounts ( does not work with yPercent ) It was suggested somewhere on this forum that className would work for this, but the css values seem to 'cache' to whatever rules applied at the screen size on page load. i.e. On the codepen the red box should move to the top of the grey bar, and < 1000px turn black, > 1000px turn green. It does this if you run the pen at either size, but if you resize live the initial css value is always used. Is there an easy way around this? Or a simpler method? I also tried using modifier plugin, as suggested elsewhere, but had similar results ( I couldn't find the modifiers plugin js link to make another codepen, commented out in my demo ) I'm guessing some sort of destroy / rebuild the timeline on resize would do the trick, but would be nice if I didn't have to do that? ( maybe not relevant but I am attaching it to a scrollmagic scene, which triggers the shrink / expand nav logo on scroll ) Cheers Greensock you're awesome!
  18. I'm trying to create a simple masonry style portfolio. I'm aware of the many plugins existent, i've tried already masonry.js, but i was quite unhappy with several animations conflict i ended up having with GSAP. Anyway, my question is not even so specific to this very masonry example, so the problem i have here is: this example is based on a series of elements nested inside a multicolumn container. The number of columns is changed according to the window dimension and resizing, or rotation. But at that point all the elements are rearranged suddenly. Could i have a transition instead? I'm not so expert in css transition and i'm not sure that is the way, so very open to suggestions. Maybe GSAP could do the job?
  19. This question is in reference to a previous question I've asked here on the forum. I wanted to achieve the similar transition effect as shown in SCABAL and thanks to the suggestion of @Carl , I was able to achieve the same effect with help from TimelineMax. However, I believe the method I used isn't very responsive friendly. Becuase in order to achieve the similar effect as shown in scabal.com, I tried doing it with TimelineMax(here) and used relative and absolute positioning which completely messed up my mobile responsiveness. To counter this, I have used CSS grid and made a layout which is responsive(here) but I am not able to achieve the same effect using TimelineMax(with CSS Grid) and I can't / don't want to use relative and absolute position in this case. I believe, if I use from( ) and bring the panels to the default state, I will have the effect I am looking for. TLDR: How can I achieve the same effect(as shown in Scabal when you scroll down) only by using from( ) and set( ) method? I've tried but I couldn't get it right. Thank you so much for your time. Help is really appreciated. This is bugging me for quite some time now.
  20. I didn't know if there was a showcase thread but I wanted to share my latest website with you all. https://zadesigns.com make sure to check it out on both the Phone and Browser because it's been designed to be friendly to phones. The site was created with Angular 4.4.6 / UI-Router / Material Design / GSAP 15 / ScrollMagic / SplitText Thanks to Jack and everyone at GSAP for making really great products! Been using GSAP since the good old days of Flash. Also congrats on the new Animation UI dev tool! I haven't had a chance to use it yet but I wish I saw it before I made my site! Thanks! Zuriel
  21. Hi guys! Is it possible to find an example of a responsive banner that I can make in Adobe Animate 2017? All my old source files that worked a year ago do not work now and my skills are not enough to understand what has changed, I just see that the code that generates Animate just diferent. The banner should stretch the entire length of the page, have a minimum width (for example 800 px), and inside there should be 3 independent moveclips - "left", "central" and "right", which change their position depending on the width of the banner. Thanks for any help!
  22. Hi, I am creating a responsive animation where there's an image on the background and some elements of it are animated. For example, I would like to move a cloud 20% of the screen width, but with the code that I have, it's moving it but of a 20% of the cloud width. Does anyone know how to do it of the screen width instead of the cloud width? This is my code: TweenMax.to('#cloud', 5, { x:"20%", ease:Power1.easeInOut, yoyo: true, repeat:-1 });
  23. so for a site I'm working on. the mobile will essentially be a basic slider while the desktop has a different slide functionality. Currently I have the desktop slider complete and trying to figure out the best way to go about this. These are the two options I thought of Clone the html with jquery clone and create a new mobile timeline version. show hide with css. Create and destroy timelines on the same html based on browser size. Which is the better option or is there a better option out there? Thanks!
  24. Hi guys! Your community is awesome! I often read this forum but now I can not find an answer to my question. I need to make a responsive banner that stretches vertically and horizontally within certain limits (320x268 -> 1080x328). Inside this responsive container must play video. Advertising requirements are as follows: <script> function getUrlParam(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&]" + name + "=([^]*)"), results = regex.exec(location.search); return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } </script> <a id="click1_area" href="#" target="_blank">...</a> <a id="click2_area" href="#" target="_blank">...</a> <a id="click3_area" href="#" target="_blank">...</a> // After "<a href ...></a>" assign them to click handlers: <script> document.getElementById("click1_area").href = getUrlParam('link1'); document.getElementById("click2_area").href = getUrlParam('link2'); document.getElementById("click3_area").href = getUrlParam('link3'); </script> For Video: Thank you guys for any help!
×
×
  • Create New...