Search the Community

Hi community, need some help. I'm facing a problem in setting up a custom cursor for my page in Next.Js. My cursor should only work for certain blocks - it is not visible on all other blocks. I managed to make the cursor itself, but I ran into a problem. I have a problem with initializing the appearance of the cursor when scrolling the page. That is: when I see my cursor and start scrolling up, my custom cursor will be visible on other sections (where it shouldn't even be) until I stop scrolling and move the cursor. I want it to initialize in my block correctly Here is an example where I think this works well (work block): https://www.fhoke.com/ And here is my demo. Here on the first block there is no cursor, on all other blocks there is. You can catch my error this way, start scrolling down the page from the first block and the custom cursor will not be visible until you stop scrolling and move the mouse. It works the same way in reverse https://codesandbox.io/p/sandbox/custom-cursor-chthqm?file=%2Fsrc%2FApp.tsx%3A24%2C11

Hello - I have a code for a custom cursor, and the cursor, which is a ball/circle, was supposed to grow/scale when hovering over a link, if you see the code below, this function is there, but it is not working, does anyone know what's wrong? Thank you in advance. The code is from codepen. I am using the following code, everything is working, except the hover thing I mentioned. div class="cursor"> <div class="cursor__ball cursor__ball--big "> <svg height="30" width="30"> <circle cx="15" cy="15" r="12" stroke-width="0"></circle> </svg> </div> <div class="cursor__ball cursor__ball--small"> <svg height="10" width="10"> <circle cx="5" cy="5" r="4" stroke-width="0"></circle> </svg> </div> </div> <style> body .cursor { pointer-events: none; } body .cursor__ball { position: fixed; top: 0; left: 0; mix-blend-mode: difference; z-index: 1000; } body .cursor__ball circle { fill: #f7f8fa; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <script> const $bigBall = document.querySelector('.cursor__ball--big'); const $smallBall = document.querySelector('.cursor__ball--small'); const $hoverables = document.querySelectorAll('a'); // Listeners document.body.addEventListener('mousemove', onMouseMove); for (let i = 0; i < $hoverables.length; i++) { if (window.CP.shouldStopExecution(0)) break; $hoverables[i].addEventListener('mouseenter', onMouseHover); $hoverables[i].addEventListener('mouseleave', onMouseHoverOut); } // Move the cursor window.CP.exitedLoop(0); function onMouseMove(e) { TweenMax.to($bigBall, .4, { x: e.clientX - 15, y: e.clientY - 15 }); TweenMax.to($smallBall, .1, { x: e.clientX - 5, y: e.clientY - 7 }); } // Hover an element function onMouseHover() { TweenMax.to($bigBall, .3, { scale: 4 }); } function onMouseHoverOut() { TweenMax.to($bigBall, .3, { scale: 1 }); } </script>

Hi all, I am looking for a custom scroll bar with Draggable Scroll. For simulate a scroll like mcustomscrollbar or iscroll and keep the touch fonction for mobile. I don't like the native scrollbar, i am looking for a thin/cute bar who appear only on mouse move. Anyone have something like this ? I have see : http://codepen.io/MAW/pen/WbvOrM But not working on FF/IE Thanks for reading

Hi there, I'm new to GSAP and am trying to evaluate it for some animations for a project I'm working on. I found some examples of using tweenlite to animate a custom property and was able to create a test that does this. I'm not sure how or if I can extrapolate that concept into animating multiple values at the same time with one tweenlite call. What I'm doing is animating a square box with a Matrix3D transform. (this only needs to work in webkit) To calculate the Matrix3D transform I'm using a handy bit of Javascript called PerspectiveTransform.js (https://github.com/edankwan/PerspectiveTransform.js) where I can pass the width & height of my element, and specify x&y coordinates for all four corners of the element. The script then calculates the Matrix3D transform required to distort the element to those new coordinates. I have a jsfiddle example that illustrates this. The first box has a Matrix3d transform applied showing the desired result. In this test the bottom right corner is moved from 250,250 to 220,220. I found examples on these forums that let me figure out how to animate that by creating an object with set/get functions. I need to figure out if I can do the same but for the "y" coordinate of that bottom right corner as well at the same time. I can only call the transform function once per frame of the animation because it generates a matrix3d transform for the whole element...not just a corner. In the end I'll actually have to animate all 4 corners of the element for a total of 8 coordinates. http://jsfiddle.net/jhBYw/1/ If anyone can help and tell me if this is even possible with GSAP or if there is a better way to do this I would greatly appreciate it. I know it is has been done: http://www.is-real.net/experiments/css3/wonder-webkit/ <div class="box1"></div> <div class="box2"></div> <a href="#">run</a> .box1 { background: blue; width:250px; height:250px; -webkit-transform:matrix3d(0.956521739, -0.043478261, 0, 0.000347826, -0.043478261, 0.956521739, 0, 0.000347826, 0, 0, 1, 0, 0, 0, 0, 1); } .box2 { background: blue; width:250px; height:250px; } function transformPerspective(elem, br_x, br_y) { var transform = new PerspectiveTransform(elem, 250, 250, true); // the properties represent the 4 corners are "topLeft", "topRight", "bottomLeft" and "bottomRight" transform.bottomRight.x = br_x; transform.bottomRight.y = br_y; // check the polygon error before updating if(transform.checkError()==0){ transform.update(); // update the perspective transform elem.style.display = "block"; // show the element }else{ elem.style.display = "none"; // hide the element } } var box = $('.box2').get(0); var endValX = 220; var currValX = 250; obj = {}; obj.getDistortVal = function() { return parseInt(currValX); }; obj.setDistortVal = function(new_x) { currVal = parseInt(new_x); transformPerspective(box,currVal, 250); }; var animate = function(e) { e.preventDefault(); TweenLite.to(obj, 0.2, {setDistortVal: endValX, ease: Power2.easeInOut}); }; $('a').on('click',animate);

I'm trying to tween a custom object property with string values, but they are changed to NaN. Why are they been treated as number? .fromTo(_bg, 0.7, { currentBg:'bg1', curentBgType:'gradient', ratio:0 }, { currentBg:'bg2', curentBgType:'gdImg', ratio:1 },0.001 )

So I haven't had any luck finding an answer to this via Google or the forums here yet, so hopefully someone can help. Is there a way to specify what (other than the selected item) the selection rectangle uses to set its size, if a TransformManager is applied to a Sprite with multiple children? Scenario: I have a Sprite with 2 children: a Bitmap, and a Shape. The Shape has a blendmode of ERASE, so the user can "erase" the image below it, but if the user 'paints' outside the visible area of the image, it increases the selection box size. I only want the selection box to be sized to the image, not the size of the image + erase layer. Does that make sense? Thanks in advance! -Jarrod