SVG/GSAP博弈中的交点

文章/答案/技术大牛

发布

1回答

jquery、svg、gsap

我已经设置了一个代码供参考，问题是当箭头和石头碰撞(一切都是SVG)时，我需要找到交叉点，碰撞后必须隐藏它们，当我们单击Trebuchet的旋转器时，石头移动，并且在页面加载后箭头应该自动启动。我都快疯了，任何建议都会有很大的帮助。codepen的链接是：- $('#rope').css('display','none');

浏览 15提问于2016-07-27得票数 1

1回答

使用GSAP在滚动上动画SVG

svg、gsap、smil、scrolltrigger

GSAP有这个插件，将触发动画的滚动，我想使用。我已经获得了一个工作的SVG动画(没有GSAP)：<svg width="596" height="255"> <linearGradient id="prog-mask" x1=0%>如前所述，这个SVG动画并没有与GSAP连接(如果它应该与ScrollTrigger插件一起工作，这是必须的

浏览 6提问于2021-02-02得票数 1

回答已采纳

1回答

TweenMax旋转问题

javascript、gsap

我试图旋转这个Svg，但当动画结束时，它会跳跃并再次开始，我想要的是线性动画，它永远运行，没有快照。我试着改变轻松，但什么都不起作用<svg className="SVG" height="179"

浏览 26提问于2021-05-26得票数 0

1回答

外部SVG精灵与.childnodes

javascript、html、svg、xmlhttprequest

我有一个网站与几个svg图标和svg标志，我必须动画。我使用XMLHttpRequests在请求开始时加载sprites。/assets/images/sprites-logo.svg"); let shapeLogoRoadmap = document.querySelector('.js-s

浏览 4提问于2019-11-01得票数 5

回答已采纳

1回答

在ScrollTrigger GSAP水平滚动中动画化子元素

javascript、html、jquery、gsap、scrolltrigger

我有一个svg，它构成了我的horizontal滚筒的基础。目前，只有视图中的.animate元素开始淡入up。当我向下滚动继续滚动时，其他元素是静态的。备注：我理解在这里张贴代码的规则和

浏览 36提问于2022-01-31得票数 4

回答已采纳

2回答

<symbol>的GSAP动画不更新<use>

jquery、svg、gsap

例如，为什么使用fill TweenMax在<symbol>中动画元素的属性，但是使用jQuery的attr()函数操作它一次就没有效果了？。

浏览 2提问于2015-09-22得票数 1

回答已采纳

1回答

离子中的GSAP* DrawSVGPlugin*

typescript、svg、ionic-framework、gsap

我想在Ionic3中实现这个插件。据我所知，npm包没有来自俱乐部的插件，也没有@type/gsap。我将DrawSVGPlugin.js添加到node_node/gsap中，然后重新创建了一个android平台。在导入的.ts文件中，我尝试了：作为调用插件： TweenLite.to("

浏览 19提问于2018-01-05得票数 0

回答已采纳

2回答

SVG动画- Center动画为SVG从中心

css、animation、svg、hover

我已经在GSAP中做了这个效果，这里是Codepen作为一个参考： const tl = gsap defaults: { ease: "power1.in" }, .to(svg.children[0]

浏览 1提问于2020-10-19得票数 2

回答已采纳

2回答

我有一个调整大小的函数，当浏览器被调整大小时会触发，在桌面上它只会在页面第一次加载时触发一次。但是，如果用户在Safari或Chrome这样的移动浏览器上，它将多次触发，因为当用户开始滚动浏览器地址栏和底部导航时，会缩小或消失，导致视图端口发生更改，然后触发调整大小事件。我在下面发布了部分JavaScript，这样您就可以看到newSize()函数并调整事件侦听器的大小。("#svg__bg", { attr: { width: w, height: w * ratio } }); } else

浏览 3提问于2020-04-01得票数 1

回答已采纳

1回答

Greensock GSAP* + SVG路径动画+滚动条*

javascript、svg、scroll、gsap

我现在正在学习JS动画方法，我已经编写了这段小代码，它使用GSAP库中的TimelineLite()和staggerTo()依次绘制和填充SVG路径。$('#svg path').each(function() { preparepath(path); functionSVG路径。我被Bright Media 的一个很棒的网站炒作了，在那

浏览 5提问于2014-03-12得票数 0

1回答

为移动视图动态构建HTML/SVG的Javscript

javascript、jquery、html、svg

我有一个全屏SVG图像/蒙版显示；它在桌面上工作得很好，但在移动设备上不能缩放/适应。因此，我猜最好的解决方案是根据屏幕宽度动态构建SVG和SVG容器，并使用移动和桌面构建。所以我正在寻找建议和最好的解决方案，如果有人能给我指出正确的方向，或者知道我可以参考的例子。 ("#svg__bg", { attr: { width: w, height: w * ratio } });

浏览 13提问于2020-03-31得票数 0

1回答

gasp.from()没有在reactjs中完成动画吗？

reactjs、animation、react-hooks、gsap

如何才能修复gsap.from()没有完成动画的反应。import { useRef, useEffect } from "react";import reactLogo from "./assets/react.svg"; import "./App.css

浏览 2提问于2022-07-13得票数 -1

回答已采纳

1回答

如何从左侧减小SVG的宽度其他应该保持不变

javascript、html、css、css-animations、gsap

我试着用GSAP控制SVG从右向左移动。它工作得很好，但当我想要将它动画到最左边时，但下线应该保持在相同的位置。另一边应该保持相同的位置。我想要的第二件事是从当前位置开始(例如，单击第二个按钮，如果你单击另一个按钮，它应该从第二个按钮的位置开始)，目前，它从最左边开始。任何帮助都将不胜感激。 ('.box',{ strokeDasharray: '4'}); } <script src="https://cdn

浏览 19提问于2021-07-11得票数 0

1回答

HTML5 5-画布活动框架，用于快速、健壮、简单的使用

javascript、html、canvas

我刚刚收到一个客户端的请求，要求建立一个网站，我猜需要部署HTML5画布。对于你来说，这是一种有不同车厢的火车。访问者应该能够左右滚动沿火车，并点击窗口显示不同的内容(在弹出或独立窗口)。不过，我很想知道是否有一个active (如2017)画布框架可以从开始，以满足前面提到的需求。我已经检查过了，但回复可以追溯到2012年，并给出了建议过时/未维护的库的答案。一个好的完整的样品库也可以。蒂娅。

浏览 9提问于2017-11-23得票数 0

1回答

Firefox中的SVG* + GSAP遮罩动画问题*

animation、firefox、svg、mask、gsap

我想在SVG中动画(为了简化，假设是Scale+)一个文本蒙版(它必须是一个蒙版)。我正在使用GSAP来实现这一点。var tl = new gsap.timeline(); gsap.to("#masktext", 3, {scale: 3, "text-anchor": "middle/3.2.4/<em

浏览 2提问于2020-04-08得票数 1

1回答

GSAP:在动画SVG时保留以前的转换

javascript、animation、svg、gsap

我正在制作一个小的互动网站使用滚动魔术和GSAP动画SVG元素。有人知道如何在GSAP中动画其他属性时保留SVG元素的旋转吗？示例代码：<svg height='300px' width='500px'

浏览 7提问于2015-10-26得票数 0

回答已采纳

2回答

由于{工期:X}，gsap* Flip.fit svg元素没有移动到预期坐标。*

animation、svg、gsap

我对gsap的Flip.fit移动到坐标感到困惑。目标当用户单击该包时，将选择一个随机播放的瓷砖，并“假定”移动到面板上的瓷砖上。当持续时间超过零时，最终位置是非常随机的。

浏览 3提问于2022-02-06得票数 0

回答已采纳

1回答

gsap旋转-如何避免急剧转换

javascript、gsap

有没有人可以帮我让这个挥杆更流畅，而不是从一个方向到另一个方向的急剧过渡？动画应该像风中的秋千。 const stepDuration = 0.5, wing = '#wing'; gsap.set(wing, {transformOrigin: "50% 0%", rotation: 15})const walk = () => {gsap.timeline({repeat: -1, defaults: { ease: "circ.inOut", du

浏览 59提问于2020-01-03得票数 1

回答已采纳

1回答

v3上的gsap小鼠

javascript、gsap

我正在尝试使用gsap 获得在v3中显示的效果，但无法使其工作。所提供的笔是在较旧版本的gsap中提供的，我尝试将其转换为如下所示： let line= document.createElementNS(svgns, 'line'); line.setAttribute('data-s

浏览 2提问于2020-01-10得票数 0

回答已采纳

1回答

GSAP ScrollTrigger不适用于我的盒子

javascript、css、gsap

我正在尝试学习GSAP，我希望在滚动时能看到一些元素，并且我找到了一个用于GSAP的ScrollTrigger插件。但是，它不起作用。当滚动时，它会向后滑动，但当向下滚动时，什么都不会出现。/assets/react.svg";import gsap from "gsap"; import styled from "styled-components&quo

浏览 30提问于2022-11-17得票数 0

回答已采纳

点击加载更多