Jump to content
GreenSock

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

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. Hello! I need your help. I had difficulty writing a JS code for changing the background. I have only two colors, it's black and white. The first section should be black, the second section is white, the third section is black, the fourth section is white and so on. At the same time, I want the background to change smoothly when scrolling down. As it happens now for the first two sections. Is it possible to do this?
  2. Hi, I have an animation that I'm having issues with. I'm trying to reveal a text while also push the logo at the same time (look video reference) but I can't do it smoothly. On my codepen it shows a big jump for the logo image once the text is reveled. Any help on how can I solve this? Screen Recording 2022-06-23 at 15.32.07.mov
  3. Hey Everyone, i'am trying to Animate a Group inside of an SVG based on if the Path is scrolled past the Point. Currently the Point is getting visible once the Page loads. But it should only appear or disappear if the line has moved past that Point. I've tried to put it into the Timeline but it didn't seem to work. It should be linked to the ScrollTrigger as the Path animation. Thanks in advance for the help!
  4. React is a hugely popular library choice, and as evidenced by many of the sites in our showcase - React and GSAP can be a powerful combination. However, utilizing GSAP in React requires a different way of thinking than a vanilla JS project. We've written this guide to help you get started using GSAP within a React project. This is not a tutorial, so feel free to dip in and out as you learn. Think of it as a collection of recommended techniques and best practices to use in your projects. Why GSAP? Animating with GSAP gives you unprecedented levels of control and flexibility. You can reach for GSAP to animate everything — from simple DOM transitions to SVG, three.js, canvas or WebGL — your imagination is the limit. More importantly, you can rely on us. We obsess about performance, optimizations and browser compatibility so that you can focus on the fun stuff. We've actively maintained and refined our tools for over a decade and there are no plans to stop. Lastly, if you ever get stuck, our friendly forum community is there to help. Going forward we will assume a basic understanding of GSAP and React. If you're just getting going with React, this tutorial from the React team is a great place to start. Need a GSAP refresher? Take a break and read about tweens and timelines. We’ll be here when you get back. Feeling confident? Skip straight to part 2 - GSAP + React, advanced animation techniques. Quick Links Getting set up Targeting a DOM element for animation Creating our first animation Targeting descendant elements Creating a timeline Controlling when React runs our animation with useEffect Reacting to changes in state Animating on interaction Avoiding flash of unstyled content (FOUC) Cleaning up Online Playgrounds Get started quickly by forking one of these starter templates: CodePen CodeSandbox CodeSandbox + Bonus Plugins Create a new React App If you prefer to work locally, Create React App provides a comfortable setup for experimenting with React and GSAP. To create a project, run: npx create-react-app gsap-app cd gsap-app npm start Once the project is set up we can install GSAP through npm, npm i gsap npm start then import it into our app. import React from "react"; import { gsap } from "gsap"; export default function App() { return ( <div className="app"> <div className="box">Hello</div> </div> ); } More detailed information about getting started with React Additional GSAP installation documentation Targeting elements In order to animate using GSAP we need access to the element in the DOM. Refs provide a way for us to interact with and store references to DOM nodes in a React component. const boxRef = useRef(); return <div className="box" ref={boxRef}>Hello</div>; Read more about refs in the React docs Creating our first animation GSAP updates inline style properties, so it’s important to make sure the DOM has been rendered before trying to animate anything. If we ask GSAP to animate an element that hasn’t been rendered, we’ll get this warning in the console. GSAP target not found. In order to avoid targeting a null element, we can use the useEffect hook. This hook tells React that our component needs to do something after rendering. function App() { // store a reference to the box div const boxRef = useRef(); // wait until DOM has been rendered useEffect(() => { gsap.to(boxRef.current, { rotation: "+=360" }); }); // DOM to render return <div className="box" ref={boxRef}>Hello</div>; } In this example, React will first render the box element to the DOM, then GSAP will rotate the box 360deg. See the Pen React & GSAP Starter Template by GreenSock (@GreenSock) on CodePen. Targeting descendant elements gsap.utils.selector() Creating a ref for each and every element we want to animate can add a lot of noise to our code. We can avoid this by making use of GSAP’s selector utility to easily select descendant elements. const el = useRef(); const q = gsap.utils.selector(el); useEffect(() => { // Target ALL descendants with the class of .box gsap.to(q(".box"), { x: 100 }); }, []); See the Pen gsap.utils.selector() by GreenSock (@GreenSock) on CodePen. Forwarding refs gsap.utils.selector() will target all descendants in the component tree. Within a component based system, you may need more granular control over the elements you're targeting. You can use ref forwarding to get access to specific nested elements. See the Pen Forwarding refs by GreenSock (@GreenSock) on CodePen. Creating and controlling timelines Up until now we've just used refs to store references to DOM elements, but they're not just for elements. Refs exists outside of the render loop - so they can be used to store any value that you would like to persist for the life of a component. If you're coming from class based components, this should be familiar to you as it’s essentially the same as using ‘this’. In order to avoid creating a new timeline on every render, it's important to create the timeline inside an effect and store it in a ref. function App() { const el = useRef(); const q = gsap.utils.selector(el); const tl = useRef(); useEffect(() => { tl.current = gsap.timeline() .to(q(".box"), { rotate: 360 }) .to(q(".circle"), { x: 100 }); }, []); return ( <div className="app" ref={el}> <Box>Box</Box> <Circle>Circle</Circle> </div> ); } This will also allow us to access the timeline in a different effect and toggle the timeline direction. See the Pen React Tutorial 2f by GreenSock (@GreenSock) on CodePen. Controlling when React runs our animation. By default useEffect runs both after the first render and after every update. So every time our component’s state changes, it will cause a re-render, which will run our effect again. We can control when useEffect should run by passing in an array of dependencies. To only run once after the first render, we pass in an empty array. // only runs after first render useEffect(() => { gsap.to(q(".box-1"), { rotation: "+=360" }); }, []); // runs after first render and every time `someProp` changes useEffect(() => { gsap.to(q(".box-2"), { rotation: "+=360" }); }, [someProp]); // runs after every render useEffect(() => { gsap.to(q(".box-3"), { rotation: "+=360" }); }); See the Pen React Tutorial 1b by GreenSock (@GreenSock) on CodePen. Reacting to changes in state Now that we know how to control when an effect fires, we can use this pattern to react to changes in our component. This is especially useful when passing down props. function Box({ children, endX}) { const boxRef = useRef(); // run when `endX` changes useEffect(() => { gsap.to(boxRef.current, { x: endX }); }, [endX]); return ( <div className="box" ref={boxRef}>{children}</div> ); } See the Pen React Tutorial 1c by GreenSock (@GreenSock) on CodePen. Animating on interaction Interaction is one of the most exciting things about animating on the web! In order to hook into user interactions like hover, we can use callbacks. const onEnter = ({ currentTarget }) => { gsap.to(currentTarget, { backgroundColor: "#e77614" }); }; const onLeave = ({ currentTarget }) => { gsap.to(currentTarget, { backgroundColor: "#28a92b" }); }; return ( <div className="box" onMouseEnter={onEnter} onMouseLeave={onLeave}> Hover Me </div> ); See the Pen React Tutorial 1d by GreenSock (@GreenSock) on CodePen. Avoiding flash of unstyled content (FOUC) As useEffect fires after the DOM has been painted, when fading in elements you may notice an undesired flash of unstyled content. In order to avoid the flash, we can replace useEffect with useLayoutEffect. useLayoutEffect functions exactly the same as useEffect, but runs before the DOM has been painted. See the Pen Avoiding FOUC with useLayoutEffect() by GreenSock (@GreenSock) on CodePen. useLayoutEffect is especially useful when you need to make DOM measurements, so we highly recommend it when using our ScrollTrigger and FLIP plugins. More information about useEffect vs useLayoutEffect. Cleaning Up It’s a good idea to return a cleanup function in your effects to kill off any running animations and anything else that could cause a memory leak, like an event listener. This is particularly important if an animation runs for a really long time, makes use of ScrollTrigger, or changes the state in a component. useEffect(() => { const animation1 = gsap.to(".box1", { rotation: "+=360" }); const animation2 = gsap.to(".box2", { scrollTrigger: { ... } }); const onMove = () => { ... }; window.addEventListener("pointermove", onMove); // cleanup function will be called when component is removed return () => { animation1.kill(); animation2.scrollTrigger.kill(); window.removeEventListener("pointermove", onMove); }; }, []); We hope this article was helpful - If you have any feedback please leave us a comment below so we can smooth out the learning curve for future animators! Feeling confident and want to learn more? Check out our follow up article - GSAP + React, advanced animation techniques.
  5. I'm creating a background effect from blur to clear when scrolling. starts with filter: blur(30px) when image enter viewport. and then more clear with filter: blur(0) after top of image reach top viewport using gsap fromTo and add utils for css filter. but i have no idea for now. can help please?
  6. I am new to web dev and so to gsap plugins. The drawSVG didn't seem to work. Then i removed drawsvg:0 and the code recompiled , I could see my logo and then I added drawSVG: 1 and the code recompiled and the animation was visible and then when I reloaded the animation was gone as well as the entire svg . I have attached my code files . please have a look. import './index.scss' import LogoV from '../../../assets/images/logo-v5.png' import { useEffect, useRef } from 'react'; import gsap from 'gsap-trial'; import { DrawSVGPlugin } from 'gsap-trial/dist/DrawSVGPlugin'; const Logo = () => { const bgRef = useRef(); const outlineLogoRef = useRef(); const solidLogoRef = useRef(); useEffect(() => { gsap.registerPlugin(DrawSVGPlugin) gsap .timeline() .to(bgRef.current, { duration: 1, opacity: 1 }) .from(outlineLogoRef.current, { drawSVG: 0, duration: 20 }) }, []) return ( <div className="logo-container" ref={bgRef}> <img ref={solidLogoRef} className="solid-logo" src={LogoV} alt="V" /> <svg width="700pt" height="900pt" version="1.0" viewBox="-20 -900 1000 1400" xmlns="http://www.w3.org/2000/svg" > <g className="svg-container" transform="translate(-50 420) scale(.1 -.1)" fill="none" > <path ref={outlineLogoRef} d="M5210.8,1.1l-5210,10270h1590l3690-7130l2950,5800l-576.1-17.5l-83.9-2.5h-1710l350-900l-930-1650l-1480,3900h6700L5210.8,1.1z M10501.3,10270.9l0.4,0.7H3800.1l0.3-0.7l1480-3900l0.4-1l0.5,0.9l930,1650l0.1,0.2l-349.8,899.5h1709.3l659.2,20L5280.8,3142.2l-3689.6,7129.1l-0.1,0.3H0l0.4-0.7l5210-10270l0.4-0.9L10501.3,10270.9z M1590.5,10270.6l3689.9-7129.7l0.4-0.9l2950.4,5800.9l0.4,0.8l-660.8-20H5860.1l0.3-0.7l349.9-899.8l-929.4-1648.9l-1479.4,3898.3H10500L5210.8,2.2L1.6,10270.6H1590.5z" strokeWidth="4px" stroke="rgba(0, 255, 81, 0.57)" /> </g> </svg> </div> ) } export default Logo SCSS .logo-container{ z-index: 0; width: 500px; height: 620px; position: absolute; top: 0; right: 15%; bottom: 0; left: auto; margin: auto; svg{ width: 100%; height: auto; bottom: 0; transform: rotateZ(30deg) !important; } .solid-logo { position: absolute; top: auto; right: auto; bottom: auto; left: 0; margin: auto; width: 100%; opacity: 0; transform: rotateZ(30deg); z-index: 1; } } .svg-container { stroke: rgba(0, 255, 81, 0.57); stroke-width: 4px; }
  7. I am using React as part of my stack. I have two elements: 1. A circle, made up of a div using css to style it 2. A square, made up from an svg using a fill colour. I want to be able to use a library, possibly gsap, to programatically trigger the change in position of the both elements from position (x,y) to position (x,y) on the screen using a custom path (svg) or bezier curve. With the above in place, I want to be able to apply a motion blur to the circle and square to enable it to look as if there is a blurred trail behind it. Can anyone recommend me the the right tools to achieve the above?
  8. Hi, I have recently downloaded a ZIP file containing bonus plugins, and installed it according to your installation guide. I put gsap-bonus.tgz file into the main folder and ran npm install --save-dev ./gsap-bonus.tgz. I import gsap and necessary plugins and register them in my Scroll.ts file, which is responsible for scrolling effects. When I compile the code, I get the error: I logged the gsap object in Observer.js and it turned out to be undefined. What am I doing wrong?
  9. Cyber Division is an international research and development company.We are looking to bring a new identity and experience through implementing GSAP by Greensock to our website to make it more advanced and provide our users/clients with a new immersive flow that will showcase our history and achievements.Our new brand identity and UI/UX Design are done within our creative departments who pieced together all the required assets and elements to define the direction of the website when it comes to animating it.We have also pieced together a moodboard for the animations that we want to implement into the website and we are willing to assist through multiple calls and meetings throughout the journey of the creation of this website.The website is currently being developed using Next Js through two developers in our development department.What we have ready as pages to be animated are :- Landing Page- Contact PageAnd the website consists of more than 4 pages.If you think you are a good fit for this short-term position please apply and keep in mind that we have more projects to come that will require the GSAP expertise.
  10. Hey there, gsap novice here I have a simple fade-in animation on my site. However, the first time the animation loads, the whole site janks and the animation doesn't look good. All subsequent times look extremely smooth. I've tried to recreate it in a codepen, however, there the code seems to work flawlessly. I have no other scrollTrigger or gsap animation on any of the here targeted elements. Did anybody already have that problem and see a solution? Thanks in advance!
  11. Hello everyone, I have a problem which I had for multiple projects already. Whenever I use from in a timeline, combined with Scrolltrigger, it doesn't work. Using a timeline without scrolltrigger it seems to work fine. The codepen I added is an example. GSAP Example From (codepen.io) I recreated the same example with .to instead of .from and you can see it works fine. GSAP Example To (codepen.io) Can anyone help me with this problem? Thanks in advance.
  12. Hello! I want to move the purple block along the path I've draw in the SVG. This is one section of my website which uses gsap all over the page. Rest of the page can be easily selected using the ref but when I use MotionPath, It throws Invalid scope and Target not found error. Here's the codesandbox: https://codesandbox.io/s/gsap-motionpath-react-bkscsf?file=/src/App.js Thank You!
  13. Hello! I am new to using GSAP so I apologise if I follow an incorrect format. I'm currently creating an interaction map that is made out of SVG that uses zoom and pan. I have used multiple solutions (specifically this one) from other topics related to my idea and tried code from CodePen created by other users. At the same time, I am using p5.js which I noticed that this library can be used with. The issue I'm facing is when I try to implement the zoom/pan interaction from one of the examples, it causes an error when I try to interact with the SVG: "Uncaught TypeError: point.matrixTransform is not a function". I was constantly searching for the exact cause until I have removed the "setup()" and "draw()" functions which causes the interaction to work. Nothing else could have interefered as I have created a completely new project that only contained the SVG and the code of the interaction without any of the p5 functions which also worked. I tried to search if other people had a similar issue to mine, but it seems like I'm the first. I am very confused why this happens, does anybody know why? I need both of those functions to do the fundamental things with p5.
  14. Hello Gsap community, i'm trying to create a Website, where when I scroll through it, the Time of the Video which is permanently in the Background is connected to the Scroll. While i'am scrolling and passing certain points in the Video, different HTML Elements should appear / disappear. So for example from Second 2-6 from the video i want to display elements which explain this part of the video and so on. The Elements should not be pinned tho, because the Video itself has a scroll through like effect aswell. I unfortunatly don't have any working prototype.
  15. Hi GSAP Guys, I am trying to get this to work. When you scroll down the number counter activates when section comes in to view, then starts the counting up of the numbers. But this isn't working, I know something is wrong but can't figure it out.
  16. Hi, Is there any way to target another element for adding class while the trigger elements enters and exits viewport. Like a target prop or something. Or just add animation to another set of images. In the below code I am trying to add "active" class to the target element ".anim-phone-image" but i guess there is no such property 😅. Please help me out useEffect(() => { const scrollTexts = gsap.utils.toArray('.anim-text'); scrollTexts.forEach((item, index) => { tl.current = gsap.timeline({ scrollTrigger: { trigger: item, scrub: true, start: 'top 30%', // start when top of trigger target hits 50% point of viewport end: 'bottom 10%', toggleClass: `active-${index}`, markers: true, target: '.anim-phone-image', }, }); }); }, []);
  17. Hi! I've made an SVG image with several different objects. The interaction would be this: - If you hover an element there would be a small effect on this element. (a scale, rotate and move depending on the mouse position.) - If you hover out the element get back to the original position. Currently, I have a problem with the targeting, the effect animates all the elements in the SVG. ...And some with the mouse position tracking:) How can I solve this? Thanks for the help in advance
  18. Hi ! On my portfolio website that I'm building with Nuxt.js, I want that when the user clicks on a project, the page is scrolled until the top of the project image is aligned with the word "Réalisations" - about 250px from the top of the page. I was inspired by this official gsap example : https://codepen.io/GreenSock/pen/LZOMKY As you can see on my website , when you click on the image and the content is scrolled up, the image does not stop at the right place - but in the opposite direction it works correctly.... any idea what may cause this issue ? Thank you for your help ! ScrollTo script triggered when the user click on a project : scrollToRealisation(event) { let target = event.target.closest(".realisation") this.$gsap.to(window, {duration: 0.5, scrollTo: {y: target, offsetY:250}}); }, Here is the whole code of the page component : <template> <div id="realisations"> <div v-for="item in orderRealisations" :key="item.titre" class="realisation"> <figure @click="scrollToRealisation($event)"> <img :src="require('/assets/imgs/projets/'+item.img)" :alt="item.titre"> </figure> <div class="content"> <div class="contentWrapper"> <header> <h3>{{ item.titre }}</h3> <h5 class="client-year">{{ item.client }} - {{ item.annee }}</h5> </header> <p class="description"> {{ item.description }} </p> <footer> <a class="projectLink" :href="item.url" target="_blank">Consulter le site</a> </footer> </div> </div> </div> </div> </template> <script> import realisationData from '~/static/data.json' export default { name: 'realisations', data() { return { sections: [] } }, asyncData ({ params }) { return { realisationData } }, mounted() { this.sections = this.$gsap.utils.toArray('.realisation'); this.animateOnScroll() }, computed: { orderRealisations() { return this.realisationData.sort((a, b) => b.annee.localeCompare(a.annee)); } }, methods: { //ScrollTo scrollToRealisation(event) { let target = event.target.closest(".realisation") this.$gsap.to(window, {duration: 0.5, scrollTo: {y: target, offsetY:250}}); }, animateOnScroll() { const gsap = this.$gsap this.sections.forEach((section) => { let image = section.getElementsByTagName('figure') let content = section.getElementsByClassName('contentWrapper') this.$ScrollTrigger.saveStyles(".realisation figure, .realisation .contentWrapper"); this.$ScrollTrigger.matchMedia({ "(min-width: 769px)": function() { let imageTl = gsap .timeline({ scrollTrigger: { trigger: section, start: 'top 60%', scrub: 2, end: 'bottom 0px', } }) imageTl.addLabel("animationstart") .to(image, {width: '30vw'}) .to(image, {width: '20vw'}) let contentTl = gsap.timeline({ scrollTrigger: { trigger: section, start: 'top 40%', scrub: false, //in: true, //markers: true, end: 'bottom 35%', toggleActions: "play reverse play reverse" } }) contentTl.addLabel("contentanimation") .fromTo(content, {x:-300, opacity:0,}, {x:0, opacity:1 }, '-=0.8') }, // mobile "(max-width: 768px)": function() { let contentMobileTl = gsap.timeline({ scrollTrigger: { trigger: section, start: 'top 40%', scrub: false, //markers: true, end: 'bottom 35%', toggleActions: "play reverse play reverse" } }) contentMobileTl.addLabel("contentanimation") .fromTo(content, {y:-200, marginTop: 0, height: 0, opacity:0,}, {y:0, height: 'auto',marginTop: 20, marginBottom: 40, opacity:1 }, '-=0.8') } }) }) } } } </script> <style lang="scss"> #realisations { padding-bottom: 60vh; padding-top: 225px; @media all and (max-width: 768px) { padding-top: 0; } .realisation { display: flex; margin-bottom: 3em; @media all and (max-width: 768px) { display: block; flex-direction: column; margin-bottom: 1em; } figure { margin: 0; width: 20vw; cursor: pointer; img { width: 100%; box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; } @media all and (max-width: 768px) { width: 100%; } } .content { max-width: 500px; overflow:hidden; margin-left: 40px; @media all and (max-width: 768px) { margin-left: 0; height: auto; } } .contentWrapper { height: 100%; display: flex; flex-direction: column; justify-content: center; flex-wrap: wrap; header { h3, h5 { margin: 0; } h3 { font-size: 1.4em; margin-bottom: 0em; @media all and (max-width: 768px) { font-size: 1em; } } h5 { font-weight: 400; } } p { font-size: 0.9em; line-height: 1.2; } footer { // margin-top: auto; a { color: #fff; text-decoration: underline; font-size: 0.7em; } } } } } </style>
  19. Hello everyone! I started using scrolltrigger to make a nice scrolling website for a client. In the header section, I want the animation tu run on scrub but not on backwards scrub, so I killed it onLeave. The problem is that when the animation is killed a large black space is left above my header section. I tried making it the same as I have it on CodePen but I failed.. hope it's understandable this way. Thank you in advance!
  20. Hello. I have the following working properly in a hardcoded Wordpress template, however, it seems that whenever I view the site and I'm not logged in, the Scrolltrigger events do not work/fire. I've replicated the site in Codepen but cannot replicate the issues there: https://codepen.io/neontrenton/pen/vYdOppv Does anyone have any idea why this might be happening? It seems like a Wordpress-specific issue (I have no cache/cache plugins on the site) but I don't even know where to begin troubleshooting this. Here are the scripts I'm loading into the site: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <script src="/wp-content/themes/canvas/js/plugins/ScrollTrigger.min.js"></script> Here is an example of a ScrollTrigger event that DOES work: gsap.utils.toArray(".color-reveal").forEach((color) => { gsap.to(".color-reveal", { scrollTrigger: { trigger: color, toggleClass: "active", scrub: true, start: "top center", end: "+=100", }, }); }); Here is the specific ScrollTrigger events that DO NOT work if you aren't logged in: let containers = gsap.utils.toArray(".treatment-1"); containers.forEach((container) => { let tl = gsap.timeline({ scrollTrigger: { trigger: container, scrub: true, pin: true, start: "center center", end: "bottom top", markers: false, }, defaults: { ease: "none" } }); tl.to(container.querySelector("img"), { scale: 1, x: -500 }); tl.to(container.querySelector(".treatment__headline"), { autoAlpha: 1 }); }); // Treatment Two Animation let containerstwo = gsap.utils.toArray(".treatment-2"); containerstwo.forEach((container) => { let tl = gsap.timeline({ scrollTrigger: { trigger: container, scrub: true, pin: true, start: "center center", end: "bottom top", markers: false, }, defaults: { ease: "none" } }); tl.to(container.querySelector("img"), { scale: 1, x: 450 }); tl.to(container.querySelector(".treatment__headline"), { autoAlpha: 1 }); }); // Treatment Three Animation let containersthree = gsap.utils.toArray(".treatment-3"); containersthree.forEach((container) => { let tl = gsap.timeline({ scrollTrigger: { trigger: container, scrub: true, pin: true, start: "center center", end: "bottom top", markers: false, }, defaults: { ease: "none" } }); tl.to(container.querySelector("img"), { scale: 1, x: -500 }); tl.to(container.querySelector(".treatment__headline"), { autoAlpha: 1 }); });
  21. <div class="card"> <div class="face front"> front img </div> <div class="face back"> Bck img </div> </div> How i can change front and back face ? For right now square box are inside the svg. For now it's svg elment <rect id="point" x="270" y="-5" width="30" height="30" fill="beige" /> But we want to use DIV format there. There are any posibility or similar demo. thanks
  22. I'm coming to this having started from that support question. Many years ago I'd built a site based on this very old tutorial. Then, a few months ago I got some assistance on this in order to create a simple horizontal scroll, which worked pretty nicely. Today I've started to try and combine the scripts from support question responses, and the horizontal scroll pen, in the one I've included here (somehow I don't think that sentence makes any sense except in my own head) in order to emulate the behavior from that old tutorial. In any case, I'm not sure why it's not really working the way I think it should. I'm still fairly new to gsap, so I apologize in advance for not seeing things that should probably be obvious.
  23. Hi, how can i create anchor links for a horizontal scrolling? My version is not working correctly: $(".menu-item").on("click", function (event) { event.preventDefault(); var id = $(this).attr('href'); var left = $(id).offset().left; $('body,html').animate({ scrollTop: left }, 1500); });
  24. Hello, I've created a projects slider with interactive draggable projects menu. The snipped runs bi-directionally - if you scroll through projects it uses scrollTrigger to update the projects menu, and in reverse - if you click items in the menu, it scrolls the website to the chosen project. The problem is with the draggable projects menu, it works great on desktop and on android firefox, however in Android Chrome and on native Samsung Browser the links don't always work. It changes colour, as if the hover event fired, however touch/click doesn't register. I've tried adding Draggable setting of minimumMovement up to 20, but it doesn't help, and once I touch the link it visibly moves a few pixels so it seems like the dragging overpowers the click/tap. Please check out the codepen example in Android Chrome in landscape mode. (Sorry for the messy code, it had to be extracted from a bigger code). Thank you in advance
  25. how to make a carousel(sliding) stop when the mouse pointer hovers over on the images
×