首页 > 其他分享 >gsap 事件

gsap 事件

时间:2024-02-18 09:00:45浏览次数:32  
标签:end log gsap start 事件 console true

 1 ScrollTrigger.create({
 2         trigger: '.box',
 3         start: 'top top',
 4         end: '+=2000',
 5         markers: true,
 6         scrub: true,
 7         pin: true,
 8         animation:
 9             gsap.timeline().to('.box1', {
10                 scale: 1.5, borderRadius: '50%',background:'blue'
11                 , onStart() {
12                     console.log('start');
13                 },
14                 onComplete() {
15                     console.log('ended');
16                 },
17                 onReverseComplete() {
18                     console.log('reverse ended');
19                 }
20             }),
21         onUpdate(e) {
22             console.log(e.progress) // 0.5;
23         },
24         onEnter: () => {
25             console.log('滚动到start位置触发')
26         },
27         onEnterBack: () => {
28             console.log('滚动超过end位置,再进入滚动区域触发')
29         },
30         onLeave: () => {
31             console.log('滚出end位置时触发')
32         },
33         onLeaveBack: () => {
34             console.log('滚出end位置,再滚回来超过start位置触发')
35         },
36     })

 

标签:end,log,gsap,start,事件,console,true
From: https://www.cnblogs.com/jssoft/p/18018740

相关文章

  • PPT事件
    PPT的事件无法在slde模块直接录入,需要通过创建类并实例化来完成一、在class模块1OptionExplicit2PublicWithEventspptAppAsApplication34PrivateSubClass_Initialize()5MsgBox"实例化了PPT类"6EndSub78PrivateSubpptApp_WindowSelection......
  • vue $emit事件用法
    App.vue<template> <ConpentA @paEvent="clickData"/> {{mes}}</template><script>importConpentAfrom'./components/ConpentA.vue';exportdefault{ data(){  return{   mes:''  } },......
  • jvm shutdownHook + spring 自定义事件实现业务处理
    jvm的shutdownHook可以实现对于jvm退出的一些处理,比如资源清理,异常事件通知,spring自定义事件(或者使用内部的)可以实现bean的一些事件驱动处理,两个结合起来可以方便我们进行一些业务处理一些业务场景资源清理服务停止业务状态一致性补偿服务注册场景中的取消注册服务停......
  • js 事件冒泡 事件捕获
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>test</title>......
  • 解决双击事件触发两次单击事件
    问题在写前端的时候,偶然发现,当同一个标签同时绑定了双击事件和单击事件在触发双击事件的时候,会先触发两次单击事件,这显然是不符合预期的解决办法可以通过增加一个延时来解决这个问题写一个按钮这里写一个按钮来演示<body><buttononclick="handleClick()"ondbl......
  • vue 事件修饰符
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>事件修饰符</title><!--引入Vue--><scripttype="text/javascript"src="../js/vue.js"></script><style>*{mar......
  • Qt processEvents - 解决线程中事件阻塞(如槽函数被阻塞)
    百度了一会,发现没太有文字讲这件事情,因此整理成文字记录一下。processEvents介绍长时间运行的操作可以调用processEvents()保持应用程序响应能力。voidQCoreApplication::processEvents(QEventLoop::ProcessEventsFlagsflags=QEventLoop::AllEvents)根据指定的条件为调......
  • k8s容器秒级事件监控软件-Kube-eventer
    下面是kube-eventer的github开源地址:https://github.com/AliyunContainerService/kube-eventer ---apiVersion:v1data:content:>-{"EventType":"{{.Type}}","EventNamespace":"{{.InvolvedObject.Namespace}}"......
  • JavaScript移动端的手指触摸touch事件
    目录概念touchstart触摸发生事件touchend触摸结束事件touchmove触摸移动事件touchcancel触摸取消事件自定义事件自定义轻触事件方法touchtap自定义左右划动事件方法touchswiper概念在JavaScript中,移动端基本的手指触摸touch事件有四种,分别为:touchstart:手指触摸屏幕时......
  • 事件驱动架构
    事件(event)是状态发生变化时,软件发出的通知。事件驱动架构(event-drivenarchitecture)就是通过事件进行通信的软件架构。它分成四个部分。 事件队列(eventqueue):接收事件的入口分发器(eventmediator):将不同的事件分发到不同的业务逻辑单元事件通道(eventchannel):分发器与处理......