Jump to content
Search Community

Search the Community

Showing results for tags 'window'.

  • 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

  • Learning Center
  • Blog

Categories

  • Products
  • Plugins

Categories

  • Examples
  • Showcase

Categories

  • FAQ

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

Found 6 results

  1. <script setup> import { ref, onMounted } from "vue"; import axios from "~/services/axios.js"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { CheckBadgeIcon } from "@heroicons/vue/24/solid"; // import { CheckCircle } from '@vue-icons/heroicons'; import paint from "../../assets/images/paint.jpg"; import t1 from "../../assets/images/true/t1.jpg"; import t2 from "../../assets/images/true/t2.jpg"; import t3 from "../../assets/images/true/t3.jpg"; import t4 from "../../assets/images/true/t4.jpg"; import t5 from "../../assets/images/true/t5.jpg"; import t6 from "../../assets/images/true/t6.jpg"; gsap.registerPlugin(ScrollTrigger); const data = [ { image: t1, text: "amjad" }, { image: t2, text: "amjad" }, { image: t3, text: "amjad" }, { image: t6, text: "amjad" }, { image: t4, text: "amjad" }, { image: t5, text: "amjad" }, ]; const initAnimation = () => { const section_2 = document.getElementById("horizontal"); let box_items = gsap.utils.toArray(".horizontal__item"); gsap.fromTo( box_items, { xPercent: 30 * (box_items.length - 1), }, { xPercent: -120 * (box_items.length - 1), ease: "sine.out", // duration: 5, scrollTrigger: { trigger: section_2, pin: true, scrub: 1, // markers: true, snap: 1 / (box_items.length - 1), end: "+=" + section_2.offsetWidth, toggleActions: "restart pause reverse reverse", }, } ); }; let scrollTriggerInstance; const features = ref([]); const featuresFor = ref([]); const error = ref(null); const isLoading = ref(false); onMounted(() => { // fetchChoicesData(); window.addEventListener("resize", () => { ScrollTrigger.refresh(); }); const handleResize = () => { if (window.innerWidth <= 800 && scrollTriggerInstance) { // Kill the ScrollTrigger instance and animation if screen size is less than or equal to 800px ScrollTrigger.refresh(); scrollTriggerInstance.kill(); scrollTriggerInstance = null; } else if (window.innerWidth > 800 && !scrollTriggerInstance) { // Initialize the animation if screen size is more than 800px ScrollTrigger.refresh(); scrollTriggerInstance = initAnimation(); } }; if (window.innerWidth > 800) { scrollTriggerInstance = initAnimation(); } window.addEventListener("resize", handleResize); }); ScrollTrigger.refresh(); </script> <template> <div class="w-full"> <h1 class="text-white text-[3rem] sm:text-[5.5rem] leading-[5rem] font-[600] mb-[2.2rem] ">Pracht <br> Abonnement</h1> <div id="horizontal" class="horizontal w-full big:h-[100vh] big:overflow-hidden big:px-0 px-[1.5rem] py-[1rem] gap-[4rem] grid grid-rows-my-features big:pb-0 pb-[8rem] relative" > <div class="w-full sm:px-[5rem] xl:px-[14rem] h-max grid justify-items-center gap-[1rem] sm:gap-[10rem] sm:grid-cols-2" > <div class="w-max h-max gap-[1rem] sm:gap-[2rem] grid justify-items-start"> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Maandeliks Betalen</h1> </div> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">100% Garantie</h1> </div> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Professioneel Schilderwerk</h1> </div> </div> <div class="w-max h-max gap-[1rem] sm:gap-[2rem] grid justify-items-start"> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Zorgeloos onderhoud</h1> </div> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Reiging & Glasbewassing</h1> </div> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Ondafhankelike inspectie</h1> </div> </div> </div> <div class="container row-span-2 w-[100%] h-full m-auto"> <div class="horizontal__content h-full big:grid-flow-col grid gap-y-[4rem]"> <div v-for="num in data" :key="num" class="horizontal__item big:h-[60%] big:w-[28rem] h-[20rem] sm:h-[30rem] w-full mr-[10rem]" > <div class="horizontal__num w-full h-full relative"> <img :src="num.image" class="w-full h-full object-cover" alt="" /> </div> </div> </div> </div> </div> </div> </template> <style scoped> .text__tick { @apply text-white text-[1rem] sm:text-[1.4rem]; } .icon__tick { @apply text-[#f598af] text-[1.8rem] w-[2.2rem] h-[2.2rem]; } .container-tick { @apply grid grid-cols-my-calc grid-flow-col items-center text-left justify-items-start gap-[.7rem]; } </style>
  2. 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.
  3. Blake

    Foggy window effect

    Hi there, can anyone direct me to some examples of a foggy window effect created with GSAP? I'd love to see any examples or ideas that would show the screen getting foggy, then the fog being wiped away. I've added a pen that someone else made, but shows the direction I'd like to go in. Thank you Natalia for the pen Thanks in advance, B
  4. Hello. I am trying to use GSAP with node.js WITHOUT polluting the global scope. I am ussing nw.js (so, I have available the window object) First I do: npm install gsap --save Then in my Tween.js: var gs = window.GreenSockGlobals = {}; require('gsap'); console.log(gs); // logs empty object console.log(window.GreenSockGlobals); // logs empty object console.log(window); // logs the window object, with ALL the GSAP stuff in it console.log(window.TweenLite); // logs tweenlite object I don't want to have all the GSAP stuff in the global scope. I want to have it in a specified object. Thanks.
  5. Is there a possibility to drag the window as I drag elements around in a window? I mean, if the window is higher than what the browser can currently display, I need to scroll it down to reveal the rest of the page. I have encountered questions about scrolling a container for the actual Draggable element itself, which is not what I'm after - I simply need to scroll the whole window/document, as I'm not limiting the drag to a container. Thanks for any pointers you could give me here
  6. Hi all! I set up a site using TweenMax 1.9.5 for any animation, and everything worked properly. Later, I updated the libraries to 1.9.7 and finally to 1.9.8. With current version, the animations don't work properly; there is a conflict with Addthis dynamically created iframes. Here is a sample code reproducing the problem with a YouTube static iframe: <!DOCTYPE html> <html> <head> <!-- 1.9.6 --> <!-- <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/f91853a0e9f753c1ae8b6b36172a4d42759296af/src/uncompressed/TweenMax.js"></script>--> <!-- 1.9.7 --> <!-- <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/7c36c8f249526f687e185caa599a6e39bbed15e9/src/uncompressed/TweenMax.js"></script> --> <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/ab62042130fa8f6a875b92bd2532d1f39d7a18f4/src/uncompressed/TweenMax.js"></script> <!-- Still the same from february --> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.8/plugins/ScrollToPlugin.min.js"></script> <style type="text/css"> body > div { background-color:green; height:5000px; } </style> </head> <body> <div></div> <iframe width="560" height="315" src="http://www.youtube.com/embed/CZF2o06mlgQ" frameborder="0" allowfullscreen></iframe> <script type="text/javascript"> setTimeout(function(){ // This is to allow the iframe being loaded TweenMax.to(window, 2, { scrollTo: { y: 2500, autoKill:false }, onComplete: function() { alert("end"); } }); },10000); </script> </body> </html> As you can see, an error is thrown in TweenMax.js, line 5700. In that location, "target" is "window" when attempting to scroll it, but window[0] (target[0]) doesn't allow the access to "nodeType" property. In particular, Firefox says "Error: Permission denied to access property 'nodeType'" and Chrome indicates a cross-domain conflict between the current page and the imported in the iframe one. I figure out that this happens because window object also contains the included frames and iframes (http://www.w3schools.com/jsref/obj_window.asp), hence target[0] isn't the "desided" window object, but only the first contained iframe. There should be a window.frames[x], but looks like that window[x] works in the same way (as well as window.length), that is an array of window objects (cross domain or not). Reverting to TweenMax version 1.9.5 (the last working I had on SVN), everything works as expected. In the reported example I also included the commented imports of previous versions, and the last which looks like working is 1.9.6. Moreover, another animation in my pages throws a similar error on native IE8, and looks like 1.9.5 doesn't do the same: I didn't investigate deeply in this, because maybe that fixing the regression will also fix the other trouble. I'll get some time to do it if U wished Thanks in advance for your precious help Massi
×
×
  • Create New...