使用ScrollMagic和GSAP进行水平滚动
是一种常见的前端开发技术，用于实现网页中水平方向的滚动效果。下面是对这两个工具的详细介绍：
- ScrollMagic：
- 概念：ScrollMagic是一个JavaScript库，用于控制网页滚动事件。它可以监听用户滚动行为，并触发自定义的动画效果。
- 分类：ScrollMagic属于前端开发中的滚动动画库。
- 优势：ScrollMagic提供了丰富的滚动事件和动画控制选项，可以实现各种复杂的滚动效果。它易于使用且具有良好的兼容性。
- 应用场景：ScrollMagic常用于网页设计中的滚动导航、视差滚动、动画触发等场景。
- 腾讯云相关产品：腾讯云无相关产品与ScrollMagic直接关联。
- GSAP (GreenSock Animation Platform)：
- 概念：GSAP是一个强大的JavaScript动画库，用于创建高性能的动画效果。它支持在网页中实现各种复杂的动画，包括滚动动画。
- 分类：GSAP属于前端开发中的动画库。
- 优势：GSAP具有出色的性能和跨浏览器兼容性。它提供了丰富的动画选项和插件，可以实现流畅的水平滚动效果。
- 应用场景：GSAP常用于网页设计中的动画效果，包括水平滚动、淡入淡出、旋转等。
- 腾讯云相关产品：腾讯云无相关产品与GSAP直接关联。
综上所述，使用ScrollMagic和GSAP进行水平滚动是一种常见的前端开发技术，适用于网页设计中的滚动导航、视差滚动、动画触发等场景。ScrollMagic用于监听滚动事件，而GSAP用于创建流畅的动画效果。这两个工具在腾讯云中无直接相关产品。
相关·内容
我正在尝试集成魔幻插件与角CLI。但是，我得到了这个错误：
找不到./~/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js模块:错误:无法解析'/Users/../project/node_modules/ScrollMagic/scrollmagic/minified/plugins‘中的“TweenMax”
我已经使用npm安装了GSAP和滚动魔法库：
npm install gsap
npm install scrollmagic
.angular-cli.json
"scripts
浏览 2提问于2017-09-11得票数 4
回答已采纳
我有一个简单的问题：
如何正确使用角-cli应用程序，ScrollMagic和Gsap？
我所做的：
npm install ScrollMagic
npm install gsap
中的角-cli.json：
"scripts": [
"../node_modules/gsap/src/uncompressed/tweenmax.js",
"../node_modules/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js",
"../node_modules/scrol
浏览 1提问于2017-07-17得票数 4
回答已采纳
例子滚动魔术模块，但它也发生在其他人。我怀疑这是为了巴贝尔但不确定。
我们怎样才能复制这个bug?
Git克隆项目名称
安装：
- npm install gsap --save-dev
- bower install scrollmagic --save-dev
添加文本行config.yml：
- "node\_modules/gsap/src/uncompressed/TweenMax.js"
- "bower\_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.
浏览 2提问于2016-10-27得票数 1
我试图在react中使用ScrollMagic & gsap库，一切都很好，直到我尝试构建我的代码，我尝试了我可以在网络上找到的所有导入解决方案，但它的行为似乎不一样。
我创建了一个卡片列表，当到达某个部分时，它水平滚动，在dev版本上，它的行为完全是这样的，但是当我在生产版本(构建后)时，它以对角线方式滚动。
下面是我的一些代码，以及我如何安装库：
安装gsap：
npm i gsap
安装滚动魔法：
npm i scrollmagic
反应中的我的代码：
import React, { Component } from 'react';
import ReactDO
浏览 2提问于2020-03-07得票数 0
回答已采纳
1回答
我正在尝试使用ScrollMagic的这个特定的动画
但是很难正确地加载文件。我正在尝试包括ScrollMagic、GSAP和GreenSock，但不知何故，ScrollMagic要求我以前加载GSAP，并且GSAP说主模块丢失了，并要求我先加载ScrollMagic。我正在使用jQuery进行异步操作，如下所示
$.getScript( "http://localhost/icons/gsap.js", function( data, textStatus, jqxhr ) {
$.getScript( "http://localhost/icons/scr
浏览 4提问于2015-04-30得票数 2
我正在尝试让ScrollMagic与ES2015导入和反应一起工作。我得到了这个错误：
ERROR in ./~/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Cannot resolve module 'TimelineMax' in /Users/dillonraphael/Desktop/marbleshark_landingpage/node_modules/scrollmagic/scrollmagic/uncompressed/plugi
浏览 5提问于2016-04-26得票数 3
由于WebpackError: ReferenceError: window is not defined，我的Gatsby站点无法部署到Netlify
我试过：
包装返回语句在if(window !== undefined)检查中没有工作在my index.js：if (typeof window !== 'undefined') { require('scrollmagic') require('scrollmagic-plugin-gsap') }中放置了一个require语句，它没有工作
我注意到导入语句import Scrollmagi
浏览 0提问于2020-04-02得票数 1
回答已采纳
我有一个具有以下组件的nextjs项目：
import React, { PureComponent } from "react";
import { Power3, TimelineMax } from "gsap";
import ScrollMagic from "scrollmagic";
export default class TextFade extends PureComponent {
constructor(props) {
super(props);
浏览 3提问于2019-12-19得票数 0
回答已采纳
我现在拥有的
我正在使用jQuery和ScrollMagic (用GSAP插件)构建一个HTML/CSS/JS滚动时间线。我有基本的时间线功能工作，时间轴事件动画的页面向下滚动。
我想要添加的
我的问题是关于实现从中心垂直线到每一个时间轴事件的横线的最佳方法。理想情况下，水平线会像从中线上画出一样的动画，但是淡出也能工作。
我知道ScrollMagic有的能力，但我不确定是否有更有效的方法。例如，也许使用HTML5画布或者仅仅使用简单的图像对这个应用程序更有意义。我的目标是保持页面响应，所以这是值得考虑的事情。
如能就这一专题提出任何建议或示范，将不胜感激。
当前的“事件动画”的例子，它利用
浏览 0提问于2016-01-18得票数 0
我正在使用angular 6和webpack 4，以便从scrollmagic和"TimelineMax"，"TweenMax"，"TweenLite“等所有补丁中动态导入特定的"animation.gsap”。 然而，尽管路径是正确的，但它无法找到它们，我通过并能够找到它们，以及成功地动态导入ScrollMagic。 我是不是漏掉了什么，有没有人能帮我指引一下，看看我是不是漏掉了什么？ 这是我的Webpack配置： config.mode = 'development';
config.target = 'web&
浏览 33提问于2020-07-02得票数 0
回答已采纳
我目前正在努力让ScrollMagic在Angular 7上完全工作，我已经安装了GSAP和ScrollMagic，但是为了让ScrollMagic工作，它还需要animation.gsap.js插件。
我已经导入了所有的东西，并且所有的导入都在工作，但是animation.gsap.js仍然找不到GSAP动画库。每次我尝试ng服务时，我得到错误:模块找不到:错误:无法解析'TimelineMax‘和模块找不到:错误:无法解析'TweenMax’。
我读过关于人们遇到的相同问题，但这是在Angular 2中，一些事情发生了变化，我没有得到与那些人相同的结果。
但到目前为止，我已
浏览 0提问于2019-04-11得票数 1
我想让服务工作者在我的角度供电的网站，但它不注册自己，如果使用滚动魔术。如果我禁用ScrollMagic控制的动画，它就会注册得很好。
我在角-cli.json中导入了GSAP，ScrollMagic：
"scripts": [
"../node_modules/gsap/src/uncompressed/TweenMax.js",
"../node_modules/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js",
"../node_module
浏览 1提问于2018-04-25得票数 0
回答已采纳
为了使用，您需要加载animation.gsap.js插件。对于Webpack，您可以这样做(假设您使用了CommonJS语法并使用npm安装了所有东西)：
var TweenMax = require('gsap');
var ScrollMagic = require('scrollmagic');
require('ScrollMagicGSAP');
为了确保这确实有效，您必须在Webpack配置中添加一个别名，这样Webpack才能知道插件位于何处。
resolve: {
alias: {
'ScrollMagicG
浏览 1提问于2016-02-21得票数 14
回答已采纳
我有一个Angular 5应用程序，我目前正在使用GreenSock.js库和ScrollMagic.js实现滚动动画。一个非常重要的文件，由于某种原因，它不允许我在没有错误的情况下将其包含在项目中，名为
scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js
当我尝试将此文件导入到项目中时，收到一个错误列表-
./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Can&#
浏览 0提问于2018-05-04得票数 0
如何将ScrollMagic的Greensock插件包含在我的ReactJS项目中？
ScrollMagic的作者制作了插件来合并像GreenSock和流速这样的库。当您将它们简单地包含在html文档的头部时，这些功能非常好，如下所示
<script type="text/javascript" src="js/lib/greensock/TweenMax.min.js"></script>
<script type="text/javascript" src="scrollmagic/uncompresse
浏览 0提问于2017-11-24得票数 4
回答已采纳
1回答
运行在TweenMax之前的ScrollMagic
在使用TweenMax和ScrollMagic滚动页面时，我试图使页眉缩小，但是动画不需要等待滚动即可触发。
这是我的代码：
$(document).ready(function(){
var header = $('header')
//init the controller
var controller = new ScrollMagic.Controller();
var tween = TweenMax.to(header ,1 ,{height: 100});
var s
浏览 0提问于2016-07-07得票数 1
回答已采纳
1回答
我想结合使用gsap和ScrollMagic。ScrollMagic已经实现，工作正常，但是当我想要使用animation.gsap时，我会得到错误
在./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js * ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js中找不到这些依赖项：* TimelineMax * TweenMax
因此我通过npm安装了gsap。
npm i gsap
浏览 10提问于2017-12-29得票数 2
我正尝试在我的一个项目中使用GSAP和ScrollMagic，然而，当我尝试并要求使用animation.gsap.js时，我的编译器一直抛出以下错误； These dependencies were not found:
浏览 114提问于2019-02-01得票数 0
2回答
-I正在使用react框架。(create-react-app)和ScrollMagic库，我正在尝试在reactjs框架中实现scrollmagic库。我无法导入以下脚本。
我已经导入了scrollmagic，如下
import * as ScrollMagic from 'scrollmagic'
但我无法使用此功能->setTween()，因为他们无法访问。
以下是错误日志。
15:41:01:381 (ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'anima
浏览 3提问于2018-06-18得票数 2
1回答
所以我已经在我的网站上创建了一个平滑的滚动效果，效果很好，但我对Scrollmagic有一个问题。向下滚动时，我正在翻译元素，但它断断续续。很多。当我禁用我的平滑滚动脚本时，一切都恢复正常。 顺便说一句:我使用了Webpack和GSAP来制作动画。 我的猜测是Scrollmagic不知道动画，所以它使用的是结束值，而不是当前值。但是我不知道怎么解决这个问题 这是我的流畅卷轴： import { TweenLite } from 'gsap';
const html = document.documentElement;
const body = document.body;
浏览 49提问于2019-08-27得票数 0
回答已采纳
我将Bodymovin与ScrollMagic和GSAP结合使用，当你来回滚动时，可以通过一系列图像进行动画处理。一切都很好，除了当我走到最后的时候，它不会停留在最终的图像上，而是变成白色。
我首先加载的库：
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min
浏览 9提问于2020-04-30得票数 0
因此，我一直将ScrollMagic.js与GSAP.js结合使用，并在向下滚动时使用.setClassToggle作为侧导航活动状态。
它添加'active‘类，但不删除前一个类，直到您再次向上滚动，然后它删除它。但是这个演示展示了两种方式的切换。这是我的密码：
$(function () {
var controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({triggerElement: "#Home"})
.setClassToggle(".s
浏览 1提问于2016-09-17得票数 3
回答已采纳
我已经创建了一个网站，它使用Scrollmagic来加载网站的一部分(即，改变他们的不透明度，使他们向上移动)，因为用户滚动通过它。它在我电脑上的HTML文件上运行得很好，但由于某种原因，一旦我把它上传到我的主机服务器上，并在直播网站上，它就停止工作了。url是https://liudzi.com/。有多个部分会像这样加载，但我已经包含了代码的一部分作为示例： <!--SCROLLMAGIC-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.
浏览 60提问于2021-04-19得票数 0
回答已采纳
1回答
更改滚动魔术上的HTML元素
、、、、
是滚动动画的一个很好的工具。
CSS，GSAP和速度动画工作伟大。
但是是否有可能改变滚动的HTML文本。
在卷轴上，圆半径在移动，同时也在移动。我想改变一个数字，应该是2和3，而‘年份’应该变成年的2和3的数字。它应该像卷轴上的预加载器。
这是可能的CSS显示和隐藏，但我想这样做与scrollMagic在scrollMagic。只是想知道这有可能。
代码必须在那里与小提琴，这就是为什么要把它。
var controller = new ScrollMagic.Controller();
var yearChange = new TimelineMax()
.fromTo(&
浏览 3提问于2016-11-18得票数 1
回答已采纳
1回答
我想用ScrollMagic与GSAP和TweenMax一起制作基于滚动的动画。我以前在ScrollMagic上有过一些经验，它总是很好的工作。这一次，动画非常慢，debug.Indicators也是如此。
这是我的例子：
这是一个具有光滑动画的外国示例：
我用吐温来制作动画：
var controller = new ScrollMagic.Controller();
var scene1 = new ScrollMagic.Scene({
triggerElement: '.header-section',
duration: "100%"
浏览 5提问于2017-08-17得票数 2
回答已采纳
这是一个代码箱：，我在这里使用React与GSAP和ScrollMagic。但是当我在本地主机上运行代码时，会出现一个错误：
animation.gsap.js:32 Uncaught Error: Cannot find module 'ScrollMagic'
at webpackMissingModule (animation.gsap.js:32)
at animation.gsap.js:32
at Object../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animat
浏览 21提问于2019-11-25得票数 0
我正在尝试使用ScrollMagic来控制一个TimelineMax，它可以移动乐透动画的播放头。
因此，当用户滚动时，动画相对于滚动的速度和方向播放。我已经很接近了，需要一点帮助才能把效果带回家。
首先，我包含了我的库
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenM
浏览 35提问于2019-10-25得票数 0
回答已采纳
1回答
我是一个使用ScrollMagic的新手，并试图通过复制scrollmagic的一个例子来学习。
为了加载scrollmagic和greensocks javascript库，我在下面添加了这些脚本。然而，在控制台中，它显示.setTween不是一个函数。如何才能成功加载这些脚本？它们的顺序不对吗？
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudf
浏览 4提问于2016-09-07得票数 2
1回答
我使用ScrollMagic做视差部分滚动，跟随这个。我有它的视觉工作，但现在该页已停止滚动时，使用鼠标轮或轨道垫。它滚动的唯一方法是拖动右边的滚动条。
main.css
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
index.html
<head>
...
<script src="//ajax.g
浏览 3提问于2015-11-19得票数 1
回答已采纳
我正在开发一个垂直和水平卷轴的网站。当我向下滚动鼠标轮时，我想水平滚动。我已经通过ScrollMagic和GSAP (TimelineMax)实现了这一点。但是，当我调整窗口的大小时，我需要更新thant包含的变量，该变量是我必须向右滚动的像素数。
当窗口加载时，我会进行一系列计算，以知道我必须向右滚动多少像素(var amount_to_scroll)：
function calculateCarruselDimensions() {
var total_width = 0;
var total_global_width = 0;
var amount_to_scro
浏览 0提问于2019-08-28得票数 0
回答已采纳
我正在开发UI，并试图实现scrollmagic和GSAP，我第一次在加载时实现了GSAP动画，对我来说很有魅力，但是当我尝试用Scrollmagic实现GSAP时，我在控制台中得到了这个错误。
未定义的ReferenceError: ScrollMagic未定义
有关更多信息，我在package.json文件中添加了依赖项。
"dependencies": {
"gsap": "^1.20.4",
"scrollmagic": "^2.0.5"
}
然后将其导入ap
浏览 0提问于2018-03-06得票数 0
1回答
我正在使用react-gsap和react-scrollmagic，并试图在动画完成时触发一个函数。但是，当我向下滚动时，它工作得很好，但是，当我向上滚动时，函数不会触发。我在react-gsap 中找不到任何关于这个问题的参考。有什么解决办法吗？
<Controller>
<Scene triggerHook={0} duration={duration} pin={{ pushFollowers: false }}>
{(progress) => (
<Timeline totalProgress=
浏览 17提问于2022-02-05得票数 0
1回答
角2与滚动魔法
、、
我正在尝试在我的角2应用程序中实现滚动魔法，但到目前为止我一直没有成功。我看了很多教程，但他们都帮不了我。我正在寻找一个人，谁可以清楚地向我解释，我如何能够获得角2与滚动魔术工作。我试过这样做：
我在我的组件中添加了这个：
import { TweenLite, TimelineMax, TweenMax } from "gsap";
import { Component, NgZone, AfterViewInit} from '@angular/core';
declare let ScrollMagic: any;
@Component({
selec
浏览 13提问于2017-12-29得票数 1
我可以为我的React项目安装ScrollMagic和npm install scrollmagic。现在，我需要一种方法来安装以下插件，以使ScrollMagic与GSAP一起工作
plugins/动画.
提前感谢
浏览 0提问于2018-09-07得票数 0
这个 (转到负责/scroll路由的scrollExample文件夹)的目标是在滚动部分触发图像显示效果。
如何做动画：：
首先，我使用GSAP的CSSRulePlugin来获得我想要动画的伪元素。在那之后，我创建了一个时间线来放置吐温并编写动画属性。
现在谈到ScrollMagic，我首先创建了一个控制器，然后创建了一个场景。在场景中，我传递要触发动画的元素选择器以及持续时间(像素数量)。而最重要的部分是设置图层，这将被触发的章节卷轴。
componentDidMount() {
const imageReveal = CSSRulePlugin.getRule("
浏览 10提问于2020-03-06得票数 3
回答已采纳
1回答
Vue JS NPM模块导入组件
、、、、
我正在尝试将npm包导入到我的vue.js组件中。具体地说，我正在尝试将ScrollMagic导入到我的项目中，但我将其设置为未定义。 我以前见过有人建议它应该在我的mounted()钩子中，我正在这么做，但我的导入语句(我在main.js和components标记中都尝试过了，但都返回了未定义的变量。任何方向都将不胜感激。 我的组件的脚本： <script>
import { ScrollMagic } from 'scrollmagic';
export default {
name: 'Scroller',
mounted() {
浏览 30提问于2020-12-18得票数 0
回答已采纳
1回答
所以基本上，我有一个问题，我试着用scrollMagic..My代码在我的滚动动画中用reactjs编写动画，但我不知道为什么它在普通html、javascript和css中的工作方式不一样。这是密码。
import React, { useEffect, useLayoutEffect } from 'react'
import img from './images/Apple-Logo.png'
import ScrollTrigger from 'gsap/ScrollTrigger'
import ScrollMagic from
浏览 11提问于2022-05-14得票数 0
1回答
我正在使用ScrollMagic的分区擦拭在滚动上淡出一个面板到下一个面板，这工作得很完美，但我想知道是否有可能在滚动时捕捉到下一个面板(现在如果你停止滚动，你就会在两个面板之间淡入一半)。 我知道我可以使用fullpage.js，因为它们提供了确切的效果，但我不想在我已经加载了大量javascript的网站上添加另一个库，我想知道我是否可以用ScrollMagic获得同样的效果。 var controller = new ScrollMagic.Controller();
var wipeAnimation1 = new TimelineMax()
.fromTo(".pan
浏览 18提问于2020-01-31得票数 0
TL；博士有没有人能用保龄球安装ScrollMagic + GSAP动画？
我有一个包含完整栈的网站(这意味着我正在使用bower进行前端依赖管理和gulp来构建这个网站。)我试着在上面使用动画。
其中一些动画以绿库为前提。因此，我的bower.json有以下内容：
"dependencies": {
"bootstrap-sass": "3.3.6",
"gsap": "GreenSock-JS#^1.18.2",
"scrollmagic": "2.0.5&#
浏览 4提问于2016-02-03得票数 3
回答已采纳
1回答
如何使用鼠标轮滚动圆圈？
、、、、
我有一个圆，我必须旋转360度使用鼠标，滚动轮或箭头，但它将开始时，圆圈接触蓝色的边框。现在，当我滚动并触摸蓝色边框时，我的代码就开始工作了。但是我得用鼠标轮滚动这个圆圈。我的意思是，使用鼠标轮，我必须旋转的圆，也反向。
你知道怎么做吗？
$(window).bind('scroll', function() {
var l_360 = document.getElementById("l_360");
var controller = new ScrollMagic.Controller();
var tween = TweenLite.to(
浏览 3提问于2017-11-30得票数 3
1回答
我有以下代码片段：
var controller = new ScrollMagic.Controller();
var $line = $("#line");
$line.attr("stroke-dashoffset", $line[0].getTotalLength());
$line.attr("stroke-dasharray", $line[0].getTotalLength());
var tween = TweenMax.to($line, 1, {
strokeDashoffset: 0,
ease:
浏览 14提问于2022-10-31得票数 0
1回答
我试图触发我的图像显示动画为每一节滚动，我是这样做的GSAP + ScrollMagic。
问题是，我得到了一个错误，说吐温对象是无效的。
ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject
这就是我想在组件挂载时触发的动画代码：
useEffect(() => {
const scrollControler = new ScrollMagic.Controller();
const imageReveal = CSSRulePlugin.ge
浏览 3提问于2020-03-01得票数 1
回答已采纳
我试着用Gsap 3、TweenLite和bezier做一些基本的动画，但我得到的只是：
无效属性贝塞尔设置为{曲率: 2，autoRotate:真，值:数组(1)}缺少插件？gsap.registerPlugin()
这是我的密码：
<img class="paper-plane" src="fusee.png" alt="">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></s
浏览 3提问于2020-02-07得票数 3
回答已采纳
2回答
通过滚动触发CSS关键帧动画
、、、、
假设我有一个带有动画的元素：
#element {
animation: Fade 3s linear 1s forwards;
}
@keyframes Fade {
/* do stuff */
}
如何才能仅在用户向下滚动时触发此动画？Vanilla JS，jQuery，ScrollMagic，GSAP/TweenMax，随便你怎么做。
添加动画属性本身会触发该效果吗？因此，用户滚动到某个点/元素，然后我应用如下内容：$('#element').css('animation', 'Fade 3s linear 1s forwards
浏览 2提问于2016-01-23得票数 4
回答已采纳
尝试在Gatsby站点中创建动画时，出现以下错误：
12:57:12:665 (ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js
我找到了参考资料将插件添加到gatsby-config.js中，还有gatsby-browser.js，但没有确切地说明如何编写插件添加的代码。
当前gatsby.config.js：
module.exports
浏览 0提问于2018-06-08得票数 2
1回答
在滚动体上动画SVG路径
、、、
我使用ScrollMagic & GSAP在滚动页上动画一个SVG路径。工作得很好。但是，一旦我用另一个来自名词项目的SVG替换路径，滚动路径-动画。
我尝试过添加容器、将内联转换从g标记移动到path标记本身，以及来自其他解决方案的许多其他方法。
如果有人能帮我理解这是怎么回事，我会非常感激的。
浏览 3提问于2021-05-28得票数 0
回答已采纳
1回答
我想有一个全屏幕(宽度/高度)面板，以动画水平(视差)，因为用户滚动垂直。我正在尝试使用基本的幻灯片示例，但无法让它工作。我这儿有把小提琴。
$(function () { // wait for document ready
// init
var controller = new ScrollMagic.Controller();
// define movement of panels
var wipeAnimation = new TimelineMax()
// animate to second panel
.to("#slideConta
浏览 1提问于2015-12-22得票数 0
回答已采纳
1回答
我使用ScrollMagic在元素进入屏幕时立即淡入，这很有效，但只对第一个元素有效，但其余元素不会被触发。我希望每个元素都被触发，只使用一个场景就可以做到这一点。
const controller = new ScrollMagic.Controller();
var scenefadein = new ScrollMagic.Scene({
triggerElement: ".fade-in",
triggerHook: 1,
offset: 0,
reverse: true
})
.setClassToggle(".fade-in", &#
浏览 25提问于2019-10-31得票数 0
回答已采纳
连接ScrollMagic和GSAP是没有问题的--它工作得很好。但是，如果我需要使我的鼠标滚动平滑怎么办？我在我的项目中添加了一个平滑滚动插件：
它工作得很好。但当我激活触发器时，所有这些平滑的动画都会出现故障--就像是完全毁掉了UX的小碰撞/跳跃。我该如何解决这个问题呢？也许有更好的平滑鼠标滚动插件可以使用？也许有一些事件侦听器冲突-我真的不知道。
浏览 0提问于2017-10-01得票数 1
1回答
指向所需行为的链接(滚动幻灯片)：
我从网站上复制了源代码，但在回复它的行为时遇到了麻烦。我知道有一些css正在从源代码中转移，但这似乎更多的是一个我无法理解的javascript问题。
小提琴链接：
$(function () { // wait for document ready
// init
var controller = new ScrollMagic.Controller();
// define movement of panels
var wipeAnimation = new TimelineMax()
// animate to second
浏览 0提问于2017-02-18得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
